live demo
html
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
css
.container{
margin: 0;
padding: 0;
margin-top: 101px;
}
div{
height: 100px;
width: 100%;
}
.one{
background: red;
position: fixed;
top: 0;
}
.two{
background: green;
}
.three{
background: blue;
height: 500px;
}
.four{
background: black;
}
Question:
How can I make the green div scroll normally without being hidden inside the red div, while keeping the blue div and all subsequent divs visible when scrolling?
Is there a way to achieve this using jQuery or pure CSS?
Attempted jQuery solution:
I tried the following code but it's not working as expected. Can you please suggest a better approach?
$(window).scroll(function(){
var topHeight = 200;
var scrollHeight = $(window).scrollTop();
var totalHeight = $('.three').height() + $('.four').height();
if (scrollHeight == topHeight){
$('body').css('margin-top',totalHeight);
}
});