I am facing a challenge with scrollable text and sticky headers on my webpage. The top text has dynamic height based on the content below, which is followed by a sticky header with its own dynamic height. Now, I want to add another sticky header below the first one, but I am unsure about how much top position to give it. Is there a way to calculate this position dynamically at runtime, or is there an alternative method that I can use?
.container {
height: 200px;
overflow: scroll;
}
.content {
background-color: gray;
}
.header1 {
position: sticky;
top: 0px; /* Adjust according to your requirements */
background-color: red;
}
.header2 {
position: sticky;
top: 0px; /* How to position this below header1 */
background-color: blue;
}
.footer {
background-color: yellow;
height: 400px;
}<div class="container">
<div class="content"> example text at runtime<br> example text at runtime<br> example text at runtime </div>
<div class="header1"> dynamic text in header at runtime </div>
<div class="header2"> header text </div>
<div class="footer"> footer text </div>
</div>