JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="div">
Div 1
</div>

<div id="div2" class="div">
Div 2
</div>

<div id="div3" class="div">
Div 3
</div>

CSS

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; }

JavaScript

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var os = $('#div1').offset().top;
    var ht = $('#div1').height();
    if(scroll > os + ht){
        $('#div2').addClass('blue');
    }

});