Using HTML and CSS to create a sticky overlay effect

I'm currently working on developing a calendar application but facing some challenges with the layout structure.

The main aim is to create a scrollable div featuring timeline overlays.

This is my progress so far:

.calendar {
  position: absolute;
  height: 80%;
  width: 80%;
  top: 0;
  left: 0;
  margin: 50px;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 2000px;
  height: 1050px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

.top {
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgba(192, 244, 96, 0.658);
}

.main .middle {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.main .middle {
  position: relative;
  width: 100%;
  left: 0;
  background: rgba(255, 107, 49, 0.904);
}

.left {
  position: sticky;
  width: 50%;
  left: 0;
}

.lines {
  position: relative;
  width: 100%;
}

.line {
  position: absolute;

  border-top-style: solid;
  border-top-color: black;
  border-top-width: 1px;
  width: 100%;
}

.right {
  margin-left: 1rem;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: mediumvioletred
}

.items {
}

.item {
  position: absolute;
  width: 100px;
  height: 100px;
  background: maroon;
}
<div class="calendar">
  <div class="wrapper">
    <div class="main">
        <div class="top">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aspernatur eligendi dolorem perspiciatis nesciunt assumenda rem voluptas nam odit, modi optio quis dicta! Quibusdam, nisi qui porro laboriosam at eligendi!
        </div>
        <div class="middle">
          <div class="left">
            <div class="lines">
              <div class="line" style="top: 100px;">Time</div>
              <div class="line" style="top: 300px;">Time</div>
              <div class="line" style="top: 500px;">Time</div>
              <div class="line" style="top: 900px;">Time</div>
              <div class="line" style="top: 1000px;">Time</div>
            </div>
          </div>
          <div class="right">
            <div class="items">
              <div class="item" stlye="top: 300px"><div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

I am looking to add overlay lines over the "calendar", however, when I set width: 100%; for the left div, it affects the positioning of the right div.

Hopefully that clarifies things. In essence, the desired outcome should resemble this illustration upon scrolling:

https://i.sstatic.net/ztG22.png (I captured this screenshot by scrolling to the correct position)

htmlcssflexbox

Answer №1

The naming convention of the classes seems illogical to me: left contains the timeline and right holds the items.

The following code implements your description. I eliminated the relative positioning from right to align it with the left side, and added left: 0 to an item to correctly position it. 

.calendar {
  position: absolute;
  height: 80%;
  width: 80%;
  top: 0;
  left: 0;
  margin: 50px;
}

.wrapper {
  position: relative;
  background-color: lightgray;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.main {
  width: 2000px;
  height: 1050px;
  background-color: rosybrown;
  display: flex;
  flex-direction: column;
}

.top {
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: rgba(192, 244, 96, 0.658);
}

.main .middle {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.main .middle {
  position: relative;
  width: 100%;
  left: 0;
  background: rgba(255, 107, 49, 0.904);
}

.left {
  position: sticky;
  width: 50%;
  left: 0;
}

.lines {
  position: relative;
  width: 100%;
}

.line {
  position: absolute;

  border-top-style: solid;
  border-top-color: black;
  border-top-width: 1px;
  width: 100%;
}

.right {
  margin-left: 1rem;
  //position: relative;

  height: 100%;
  width: 100%;
  background-color: mediumvioletred
}

.items {
}

.item {
  position: absolute;
  left: 0;
  width: 100px;
  height: 100px;
  background: maroon;
}
<div class="calendar">
  <div class="wrapper">
    <div class="main">
        <div class="top">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae aspernatur eligendi dolorem perspiciatis nesciunt assumenda rem voluptas nam odit, modi optio quis dicta! Quibusdam, nisi qui porro laboriosam at eligendi! 
        </div>
        <div class="middle">
          <div class="left">
            <div class="lines">
              <div class="line" style="top: 100px;">Time</div>
              <div class="line" style="top: 300px;">Time</div>
              <div class="line" style="top: 500px;">Time</div>
              <div class="line" style="top: 900px;">Time</div>
              <div class="line" style="top: 1000px;">Time</div>              
            </div>
          </div>
          <div class="right">
            <div class="items">
              <div class="item" stlye="top: 300px"><div>
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your website with Bootstrap 4 by separating text and images in your carousel

I've been struggling to create a slider similar to the one shown in the image. I attempted using the Bootstrap carousel, but ran into issues with inconsistent image sizes and the text on the left side jumping around before settling in its correct posi ...

cssbootstrap-4carousel

When faced with the scenario of having the hashtag in the href attribute and a browser's back button, it

Hello everyone, I've encountered an issue with the "back" action in my browser. When I click on a link, it takes me to a specific page due to a JavaScript function being called. However, when I hit the back button, it simply removes the "#" from the U ...

javascripthtmlhref

How can CSS be used to select and style all elements within a <p> tag?

My fashion sense is specific: #style p { padding:10px; } I'm unsure which elements will be nested inside the paragraph. Is there a method to apply 10px padding to all elements within that paragraph? Can it be done like this? #style p everything ...

csscss-selectors

Is there a way to use Selenium to find and code for various radio buttons that share the same class, are within a <span> HTML tag, and do not have a unique identifier?

Currently, my task involves automating the Standard Cases Object in the Salesforce app. Each radio group corresponds to different types of cases, but unfortunately there is no unique identifier for them. How can I accurately locate the radio button? It&ap ...

htmlseleniumsalesforceui-automationsalesforce-lightning

Overflow - conceal the scrollbar and prevent scrolling without cutting off the element

Whenever I implement the code snippet below: body { overflow: hidden; } The overflowing element gets clipped. However, when I try this code instead: body { overflow: auto; } The element is no longer clipped, but now a scrollbar appears where it ...

htmlcssoverflow

Elements listed are often ignored by HTML

My website sends a URL and xpath query to the server in order to extract data from the URL based on the xpath query. While it is functioning properly, I am encountering a singular issue. When I specify an xpath query for href,text, it displays a list of a ...

javascripthtmlxmlxpath

What is the best way to connect to a specific part of a webpage that functions properly on Safari?

On my website, I have a testimonials page with a featured testimonial on the homepage that has a "Read More" option. When users click on this link, I want them to be taken directly to the testimonials page and to the specific section where that particular ...

htmlcss

A two-column bootstrap design with zero padding or gaps

This is the layout I am aiming for: https://i.sstatic.net/4LgVB.png Below is the code I currently have: <div class="row "> <div class="col-lg-6 row-eq-height push-right"> <img src="1.jpg" class="img-responsive"> ...

htmlcsstwitter-bootstrap

Animating CSS Skill Bars as You Scroll

Is there a way to achieve a similar effect as seen here? I've tried implementing the code from this answer, but it's not entirely clear. The suggestion is to use this jQuery plugin, but I can't seem to make it work. I prefer using Foundation ...

javascriptjqueryhtmlcssanimation

Replacing CSS classes in ReactJS

I am looking to customize the CSS of certain React classes in order to achieve a specific look for an input in a form. My goal is to have the input displayed as a straight line without any background color. Here is the CSS code I have been using: .text-li ...

cssreactjsreact-bootstrap

How to Insert a Hyperlink Beside a Button Using HTML and CSS

Is there a way to add a link next to the button on the right side of the screen, and keep them on the same line? I've tried different methods but the link always ends up being displayed above or below the button. .dropdown-menu { position: absolu ...

htmlcss

Using jQuery, you can automatically close a Bootstrap modal after a certain delay

In my attempt to achieve the desired outcome, I have outlined the following steps: Show modal Wait 3 seconds Hide modal Despite implementing the code below, it does not seem to be functioning properly. What could be causing this issue? Here is the code ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Arrange the "See More" button in the Mat Card to overlap the card underneath

I'm currently working on a project that involves displaying cards in the following layout: https://i.stack.imgur.com/VGbNr.png My goal is to have the ability to click 'See More' and display the cards like this: https://i.stack.imgur.com/j8b ...

cssangular

What HTML5 form JavaScript polyfill offers the most extensive functionality and compatibility across different browsers?

The improved attributes and tags introduced in HTML5 are quite beneficial. Unfortunately, support for these features is limited in Chrome and Firefox, with virtually no support in IE9 and earlier versions. After researching, I have come across Modernizr a ...

htmlformspolyfillswebshim

Identify whether the page is being accessed through the Samsung stock browser or as an independent web application

Hey there! I am on a mission to determine whether my webpage is being accessed through Samsung's default browser or as a standalone web app saved on the homescreen. Unfortunately, the javascript codes I have come across only seem to work for Safari an ...

javascripthtmlcssweb-applicationssamsung-mobile

What could be causing the margin property to fail in "container3" even after implementing the clear property in CSS?

Within the main container, you will find three smaller containers as shown in the attached file. The first two containers are styled with "float: left", while the third container has the "clear: both" property applied to it. However, it appears that when ...

htmlcsscss-float

Finding the next div by its ID using jQuery

Currently, the jQuery code provided only allows navigation from the Sport section to the Entertainment section. Is there a way to create a script that allows navigation between any div sections with just one piece of code? <div id="topBar"> &l ...

jqueryhtml

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

I am trying to create an effect where the mouse aligns with the top of a div and the div rotates as the mouse moves. The rotation should happen when the top part of the div is in line with the mouse cursor. My goal is to achieve this using the atan2 functi ...

javascriptjqueryhtmlcssmath

Add a captivating backdrop to a div element

So I have this unique HTML element that showcases a large headline with two decorative lines on either side, extending to the full width of the element. However, I now have a requirement to display some text as a background behind this element. The issue ...

htmlcssbackground