CSS Sticky sidebar and fixed header - css

Question

I have a website with a sticky sidebar and fixed header
There's a problem when I start scrolling the pages, the sidebar is covered by the header
Here's pretty rough of js fiddle
Any way to fix this problem?
javascript solution is okay if there's no way to fix it with CSS
The only solution with javascript that I can think of is to check how far the user has been scrolled away, then add padding top to sidebar, something like this
let distance = document.querySelector('.sidebar').getBoundingClientRect().top;
if (distance <= 0 && viewport_width >= 768) {
$('.sidebar').css('paddingTop', '150px');
} else {
$('.sidebar').css('paddingTop', '0px');
}
Edit :
I want the z-index for header and sidebar to be the same
Both element should not be stacked against each other

Answer 1

You need to define z-index on #header{z-index: 10;} and don't need to use float so you can achieve with display: flex & order:1 properties and use position: sticky; top:110px on #sidebar for stick without JavaScript. Check my below snippet
*{box-sizing: border-box;}
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
h2,p{margin: 0;}
#header {
position: fixed;
width: 100%;
max-width: 800px;
height: 80px;
top: 10px;
margin: 0 auto;
left: 0;
right: 0;
background-color: black;
color:red;
z-index: 10;
}
#body{
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
border: 1px solid #ccc;
padding: 5px;
width: 100%;
max-width: 800px;
box-sizing: border-box;
margin: 110px auto 20px auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#sidebarWrap {
position: sticky;
top: 110px;
height: auto;
min-width: 210px;
max-width: 210px;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
background-color: #72f8cb;
order: 1;
}
#content {
width: 100%;
height: 800px;
background-color: #f8d3a2;
}
#footer {
height: 800px;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 5px;
background-color: #ccc;
}
<div id="header">
<h2>Header</h2>
<p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla</p>
</div>
<div id="body">
<div id="sidebarWrap">
<div id="sidebar">
<h2>Sidebar</h2>
<p>Sidebar has content in it and will be sticky until it's bottom container reaches the footer container.
Then it will scroll up as expected. But will be blocked by fixed header</p>
</div>
</div>
<div id="content">
<h2>Content</h2>
<p>This is the main content section.</p>
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<p>This is the footer</p>
</div>

Answer 2

Read this article for more details.
.sidebar {
width: 25%;
height: 25vh;
min-height: 200px;
overflow: auto;
position: sticky;
top: 5%;
}
.main {
width: 60%;
height: 200vh;
min-height: 1000px;
display: flex;
flex-direction: column;
}
.main,
.sidebar {
border: 5px solid #222;
background-color: white;
border-radius: 10px;
color: #222;
padding: 15px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
body {
padding: 3%;
background-color: #ccc;
font-size: 20px;
box-sizing: border-box;
font-family: Lato, sans-serif;
}
code,
pre {
background-color: #ccc;
padding: 0 3px;
border-radius: 5px;
}
.bottom {
justify-self: bottom;
}
<div id="header">
<h2>Header</h2>
<p>This is the header blab al alb albalblablabla lb lab labl abl labl ablalbalbla blaba lb lablablablablalba balb lab alb alb la</p>
</div>
<div class="wrapper">
<div class="main">
<h2>Main content</h2>
<p>Scroll down the page!</p>
<h3>How to recreate this</h3>
<p>
Position the columns with flex. Then apply two lines of CSS to the sidebar to make it sticky:
<pre>
.sidebar {
position: sticky;
top: 0;
}
</pre> Include <code>position: -webkit-sticky;</code> for Safari.
</p>
</div>
<div class="sidebar">
<h3>Sticky sidebar</h3>
<p>I will follow you!</p>
<p>caniuse stats
</div>
</div>
<div id="footer">
<h2>Footer</h2>
<p>This is the footer</p>
</div>