Fix division at the middle of the container-CodePudding

I have three different divisions in a single container. div toolbar, div one and div two. I am trying to make toolbar, div one stick to the same place of the screen. and I also want to make sticky the div.fixed-header, only the contents inside div.fixed-header-contents should be scrollable and shouldn't go behind the divisons above it. I have tried postion sticky and fixed but the div.fixed-header-contents overlaping the previous divisions.

Here's the example :

.toolbar{
  border : 1px solid;
  position : sticky;
  z-index : 1000;
  top: 0;
}
.fixed-header{
  border-top : 1px solid;
  border-bottom : 1px solid;
}
/* .one{
  position : fixed
} */

<body>
<div >  // I want this div to be stick to the current position
  <h4>
  toolbar
  </h4>
</div>
   <div >  //I want this div to be stick to the current position
       <h3>
       some images
       </h3>
       <h3>
       some buttons
       </h3>
       <h3>
       some contents
       </h3>
   </div>
   <div >
       <div > //I want this div to be stick to the current position
           <h4>
           fixed header items
           </h4>
       </div>
        <div > //this div should be scrollable but should not overlap the previous screen
          "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
        </div>
       
   </div>
</body>

CodePudding user response：

To solve this problem you need to know .toolbar and .one height. You can set to the top property as an absolute value in the CSS, or if don't know to use Javascript to get height of elements.

For the scrollable container (fixed-header-contents) we need to add an extra wrapper, since we restrict viewport then overflow the child element with the min-height: 100%.

document.addEventListener('DOMContentLoaded', function() {
  const toolbar = document.querySelector('.toolbar');
  const one = document.querySelector('.one');
  const two = document.querySelector('.two');

  const toolbarHeight = toolbar.getBoundingClientRect().height;
  const oneHeight = one.getBoundingClientRect().height;

  one.setAttribute('style', `--toolbar-height: ${toolbarHeight}px`);
  two.setAttribute('style', `--one-height: ${toolbarHeight   oneHeight}px`);
});

.toolbar,
.one,
.two {
  position: sticky;
  z-index: 1000;
}

.toolbar {
  border: 1px solid;
  top: 0;
}

.one {
  top: var(--toolbar-height);
}

.two {
  top: var(--one-height);
}

.fixed-header {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

/* for scrollable */
.fixed-header-contents {
  overflow: hidden;
  height: 5rem;
  display: flex;
}

/* for scrollable */
.scrollable {
  min-height: 100%;
  overflow-y: auto;
}


/* not important */
section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div >
  // I want this div to be stick to the current position
  <h4>toolbar</h4>
</div>
<div >
  //I want this div to be stick to the current position
  <h3>some images</h3>
  <h3>some buttons</h3>
  <h3>some contents</h3>
</div>
<div >
  <div >
    //I want this div to be stick to the current position
    <h4>fixed header items</h4>
  </div>
  <div >
    <div >
      //this div should be scrollable but should not overlap the previous screen "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
      beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
      sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
      ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </div>
  </div>
</div>
<section>
  <h1>section 1</h1>
</section>
<section>
  <h1>section 2</h1>
</section>