JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
<nav>
		<ul>
			<li class="one"><a href="#one">One</a></li>
			<li class="two"><a href="#two">Two</a></li>
			<li class="three"><a href="#three">Three</a></li>
			<li class="four"><a href="#four">Four</a></li>
		</ul>
	</nav>
</div>
<div id="one">
	<br><br>


<p>Scrolled <span>0</span> times.</p>
	</div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

CSS

* {
	margin: 0;
	padding: 0;
}
.nav {
	position: fixed;
}
nav ul {
	list-style-type: none;
}
nav li {
	position: fixed;
	display: inline;
}
nav a {
	color: black;
}
.active {
	font-size: 30px;
}
.one {
	margin-left: 30px;
}
.two {
	margin-left: 90px;
}
.three {
	margin-left: 130px;
}
.four {
	margin-left: 190px;
}
#one {
	height: 1500px;
	width: 100%;
	background-color: red;
}
#two {
	height: 1500px;
	width: 100%;
	background-color: blue;
}
#three {
	height: 1500px;
	width: 100%;
	background-color: yellow;
}
#four {
	height: 1500px;
	width: 100%;
	background-color: green;
}
p {
	font-size: 5em;
}

JavaScript

x = 0;
$(document).ready(function(){
    $(window).scroll(function(){
        $("span").text( x+= 1);
    });
});

var divOneHeight = $('#one')[0].scrollHeight
var divTwoHeight = $('#two')[0].scrollHeight
var divThreeHeight = $('#three')[0].scrollHeight
var divFourHeight = $('#four')[0].scrollHeight
var screenPosition = $(document).scrollTop()

$(document).ready(function(){
    $(window).scroll(function(){
    if (screenPosition < divOneHeight) {
    $( "ul li:nth-child(1)" ).addClass( "active" );
    };
    });
});

$(document).ready(function(){
    $(window).scroll(function(){
    if (screenPosition > divThreeHeight) {
    $( "ul li:nth-child(3)" ).addClass( "active" );
    };
    });
});

 /*$(document).ready(function(){
    $(window).scroll(function(){
    if ( 100 < 1000 ) {
    alert("hello");
    };
    });
}); */