I need to stack few sticky header elements like this: https://webthemez.com/demo/sticky-multi-header-scroll/index.html
There are solutions for this question in stackover in here. But in my case my sticky headers have dynamic heights. Therefore not possible to hard code top position for stick headers. My code is like below:
html
<div class="sticky-header1">
Header 1 with dynamic height
</div>
<div>
Header 1 content
</div>
<div class="sticky-header2">
Header 2 with dynamic height
</div>
<div>
Header 2 content
</div>
css
.sticky-header1,
.sticky-header2
{
position: sticky;
}
Is it possible to set stacked sticky header in this scenario? Pure CSS solution is preferred.
