JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="one"><a href="#one-content">One</a></li>
    <li class="two"><a href="#two-content">Two</a></li>
</ul>

<div id="one-content">
</div>

<div id="two-content">
</div>

CSS

#one-content {
	height: 1500px;
	width: 100%;
	background-color: red;
}
#two-content {
	height: 1500px;
	width: 100%;
	background-color: white;
}

.active {
    font-size: 30px;
}

ul {
    position: fixed;
}

JavaScript

//get offsets for all your div's.  Now. you can access the number of pixels from the top of the document
//each object is by using one.top, two.top, or whatever you name your variables
var one = $("#one-content").offset();
var two = $("#two-content").offset();

$(document).ready(function() {
    $(window).scroll(function(){
        //the scroll() function will run every time the selected object is scrolled.
        //since you are binding the change of size to the scroll event, it may be best not to provide a direct
        //href to the objects.  Instead, you may want to use scrollTo inside of a click event.
        //Or, you could just add a click event that calls scroll when the link is clicked, as done below.
        //calling the scrollTop() function with no arguments will give you the current position in pixels of the selected object.
        var screenPosition = $(document).scrollTop();
        if (screenPosition < two.top) {
            $( ".one" ).addClass( "active" );
            //be sure you are removing the active class from the other ones.
            $(".two").removeClass("active");
        }
        if (screenPosition >= two.top) {
            $( ".two" ).addClass( "active" );
            $(".one").removeClass("active");
        }
    });
    
    
    //call the scroll() event so that the proper one is highlighted at the start
    $(window).scroll();
    $(".one, .two").click(function() {$(window).scroll();});
});