How to stick div below other sticky div when div has dynamic height content?

Question

I have scrollable text on top which has dynamic height according to content bellow that have sticky header which also has dynamic height below that I am trying to add another sticky header but for this second header I am not sure how much top should I give? Is there any trick to calculate position on runtime or is there any other way?

.container {
  height: 200px;
  overflow: scroll;
}

.content {
  background-color: gray;
}

.header1 {
  position: sticky;
  top: 0px;/* or whatever you wish to see it sticks */
  background-color: red;
}
.header2 {
  position: sticky;
  top: 0px;/* how to stick thi div below header1 */
  background-color: blue;
}

.footer {
  /*top: 10px;*//* useless if position is not reset to fixed,absolute or sticky */
  background-color: yellow;
  height: 400px;
}

<div class="container">
  <div class="content"> runtime example text<br> runtime example text<br> runtime example text </div>
  <div class="header1"> header text runtime dynamic text </div>
  <div class="header2"> header text </div>
  <div class="footer"> footer text </div>
</div>

Possible duplicate of [pure CSS multiple stacked position sticky?](https://stackoverflow.com/questions/54689034/pure-css-multiple-stacked-position-sticky) — Junior, Jul 22 '19 at 10:56
@Junior it's not duplicate, given example has fixed height but I am trying for div with dynamic height. Please remove duplicate mark so that other can take a look into it — New iOS Dev, Jul 22 '19 at 11:34

score -2 · Answer 1 · answered Jul 22 '19 at 12:07

Surely the heading will be <h1> or <h2> and be a child of the div. This should fix your problem.

.container {
  height: 200px;
  overflow: scroll;
}

.content {
  background-color: gray;
}

.header1 h1 {
  position: sticky;
  top: 0px;/* or whatever you wish to see it sticks */
  background-color: red;
}
.header2 h1 {
  position: sticky;
  top: 0px;/* how to stick thi div below header1 */
  background-color: blue;
}

.footer {
  /*top: 10px;*//* useless if position is not reset to fixed,absolute or sticky */
  background-color: yellow;
  height: 400px;
}

<div class="container">
  <div class="content"> runtime example text<br> runtime example text<br> runtime example text </div>
  <div class="header1">  <h1>header text runtime dynamic text</h1> </div>
  <div class="header2"> <h1>header text</h1> </div>
  <div class="footer"> footer text </div>
</div>

Thanks for help, but your solution is not working for me because if you see the result heading is not sticky, I am looking for sticky header each below other — New iOS Dev, Jul 23 '19 at 05:25

How to stick div below other sticky div when div has dynamic height content?

1 Answers1