As you scroll to the top, a class named "blue" is added to the element with the ID of "div". However, when the scroll returns to the bottom, the "blue" class remains without being removed.
Fiddle Link: http://jsfiddle.net/5d922roc
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var os = $('#div1').offset().top;
var ht = $('#div1').height();
if(scroll > os + ht){
$('#div2').addClass('blue');
}
});body, html {
height: 101%;
margin: 0;
}
.div {
margin: 20px;
padding: 5px;
height: 500px;
border: solid 1px black;
background-color: #ffffff;
}
.div.blue {
background-color: #15158F;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1" class="div">
Div 1
</div>
<div id="div2" class="div">
Div 2
</div>
<div id="div3" class="div">
Div 3
</div>