JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site-nav">

<div class="wrap">

    <ul id="nav-links">

        <li class="section-title-nav top">
            <h4><a href="#jag-home" class="section-link scroll">Home</a></h4>
        </li>

        <li class="section-title-nav skills">
            <h4><a href="#background-section" class="section-link scroll">Background</a></h4>
        </li>

        <li class="section-title-nav projects">
            <h4><a href="#projects-section" class="section-link scroll">Projects</a></h4>
        </li>

        <li class="section-title-nav blog">
            <h4><a href="http://blog.joelglovier.com" class="section-link">Blog</a></h4>
        </li>

        <li class="section-title-nav random">
            <h4><a href="#random-section" class="section-link scroll">Random</a></h4>
        </li>

        <li class="section-title-nav credits">
            <h4><a href="#credits-section" class="section-link scroll">Credits</a></h4>
        </li>

    </ul>

    </div>
</div>
    
<div id="jag-home" class="main-section wrap clearfix ">

    <h2 class="section-title"><span class="bg">Top</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">Top</h2>

</div>

<br />
<br />
<div id="projects-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Projects</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">Projects</h2>

</div>
    
<br />
<br />
    
<div id="random-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Random</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">COMING SOON</h2>

</div>

<br/>
<br/>
    
<div id="credits-section" class="main-section wrap clearfix">

    <h2 class="section-title"><span class="bg">Credits</span></h2>
    <span class="section-title-border"></span>

    <h2 class="coming-soon">Credits</h2>

</div>

CSS

#site-nav{
    height: 150px;
    border: solid 1px #666;
    background-color: #aaa;
    position: fixed;
}

.main-section{
    height: 800px;
    border: solid 1px #666;
    background-color: #777;
}

.section-link{
    color: #444;
}
.active{
    color: #0f0;
    background-color: #000;
}

JavaScript

(function highlightNav() {
    var prev; //keep track of previous selected link
    var isVisible= function(el){
        el = $(el);
        
        if(!el || el.length === 0){
            return false
        };

        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        
        var elemTop = el.offset().top;
        var elemBottom = elemTop + el.height();
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }
        
    $(window).scroll(function(){
        $('#nav-links > .section-title-nav a').each(function(index, el){
            el = $(el);
            if(isVisible(el.attr('href'))){
                if(prev){
                    prev.removeClass('active');
                }
                el.addClass('active');
                prev = el;
                
                //break early to keep highlight on the first/highest visible element
                //remove this you want the link for the lowest/last visible element to be set instead
                return false; 
            }
        });
    });
    
    //trigger the scroll handler to highlight on page load
    $(window).scroll();
})();