My header utilizes the CSS property position: sticky; to stick at the top of the page. However, this creates a gap between the header and the top of the page that I intentionally left there. As you scroll down, you can see the content div moving under and past the header. I could use top: 0; to prevent this scrolling behavior, but the gap serves a purpose. How can I adjust this so that the scrolled content disappears before passing the header?
I attempted to solve this issue by using overflow, but it resulted in a scrollbar appearing inside the div itself, which is not the desired effect. Instead, I would like to be able to scroll anywhere on the page. Additionally, when zooming in on the page, two scrollbars appear rather than just one. Another problem I encountered was that the rounded corners of the header border are disrupted when using overflow, as the content div stops at the same point as the header, causing the hard edges of the content div to show below the rounded corners.
body {
margin: 40px;
}
#container {
display: flex;
flex-direction: column;
}
#header {
height: 100px;
background-color: lightblue;
border: 6px solid black;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
position: sticky;
position: -webkit-sticky;
top: 40px;
}
.content {
background-color: green;
border-left: 6px solid black;
border-right: 6px solid black;
}
#footer {
height: 100px;
background-color: lightblue;
border: 6px solid black;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div class="content">
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
<h2>CONTENT</h2>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</div>