JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
    </ul>
</div>
<div id="sections">
    <div id ="section1" class="section">
        I'm section 1
    </div>
    <div id ="section2" class="section">
        I'm section 2
    </div>
    <div id ="section3" class="section">
        I'm section 3
    </div>
    <div id ="section4" class="section">
        I'm section 4
    </div>
    <div id ="section5" class="section">
        I'm section 5
    </div>
</div>

CSS

#sections {
    position: absolute;
    top: 0;
    left: 120px;
}

#navigation {
    position: fixed;
    top: 0;
    left: 0;
}

.active {
    background: red;
}

.section {
  padding-bottom: 400px;
}

JavaScript

$(window).scroll(function() {

    var position = $(this).scrollTop();

    $('.section').each(function() {
        var target = $(this).offset().top;
        var id = $(this).attr('id');
        
        if (position >= target) {
            $('#navigation > ul > li > a').removeClass('active');
            $('#navigation > ul > li > a[href=#' + id + ']').addClass('active');
        }
    });
});