ARTICLE AD BOX
I have a component on my website that looks somewhat like this:
body {
color: #fff;
font-family: arial;
font-weight: bold;
font-size: 40px;
}
.main-container {
max-width: 600px;
margin: 0 auto;
border: solid 10px green;
padding: 10px;
margin-top: 40px;
}
.main-container * {
padding: 10px;
background: #aaa;
border: dashed 5px #000;
}
.main-container *+* {
margin-top: 20px;
}
.main-header {
height: 50px;
background: #aaa;
border-color: red;
}
.main-content {
min-height: 1000px;
}
.main-header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.header-divider {
position: sticky;
top: 80px;
width: 80%;
place-self: center;
border-radius: 100px;
background: white;
}
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="info-content">INFO</div>
<div class="header-divider"></div>
<div class="main-content">MAIN CONTENT</div>
</main>
And it works "fine". The info container disappears when scrolling down, the header container stays on top, and the divider ends up right below the header. So far so good.
However the issue is that it assumes that the header has a constant height because the divider specifies a top attribute.
So basically the question is: can I somehow achieve the same result even if the header container has a dynamic height?
