JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <div id="main-nav" class="center">
        <ul>
            <li id="menu-item-827"><a href="#827">Section 1</a></li>
            <li id="menu-item-844"><a href="#844">Section 2</a></li>
            <li id="menu-item-866"><a href="#866">Section 3</a></li>
        </ul>
    </div>
    <br />
    <div style="white-space:nowrap">
    <li id="827" class="menu-item">SECTION 1</li>
   <li id="844" class="menu-item">SECTION 2 </li>
    <li id="866" class="menu-item">SECTION 3 </li>
    </div>
</div>

CSS

body {
    height:1500px;
    padding-top:100px;
}

.active {
    background-color:yellow;
}

#main-nav {
    position:fixed;
    top:0px;
    background-color:#FFF;
    padding:20px;
}

p {
    color:#CCC;
}


li.menu-item {
    font-weight:bold;
    font-size:25px;
    width:600%;
    display:inline-block;
}

JavaScript

$(function(){
    var sections = {},
        _width  = $(window).width(),
        i        = 0;

    // Grab positions of our sections 
    $('.menu-item').each(function(){
        sections[this.id] = $(this).offset().left;
    });

    $(document).scroll(function(){
        var $this = $(this),
            pos   = $this.scrollLeft();

        for(i in sections){
            if(sections[i] >= pos && sections[i] <= pos + _width){
                $('li').removeClass('active');
                $('#menu-item-' + i).addClass('active');
            }  
        }
    });
});