JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li id="whatbutton"><a href="#whatissm">What We Are</a></li>
        <li id="whybutton"><a href="#whyusesm">Why Us</a></li>
        <li id="offerbutton"><a href="#whatdoessmoffer">What We Offer</a></li>
        <li id="contactbutton"><a href="#contactus">Contact Us</a></li>
    </ul>
</nav>
<div>
    <h1 id="whatissm" name="whatissm"><span>sometexthere</span></h1>
    <h1 id="whyusesm" name="whyusesm"><span>somtexthere</span></h1>
    <h1 id="whatdoessmoffer" name="whatdoessmoffer"><span>sometexthere</span></h1>
    <h1 id="contactus" name="contactus"><span>Contact Us</span></h1>  
</div>

CSS

nav {
    position: fixed;
    right: 20px;
    top: 20px;
}

div {
    height: 2000px;
}

div > h1 {
    height: 200px;
}

.active {
    color: red;
}

JavaScript

$(window).scroll(function(){
    var scrollTop = $(document).scrollTop();
    var anchors = $('body').find('h1');
    
    for (var i = 0; i < anchors.length; i++){
        if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
            $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');
        } else {
            $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');
        }
    }
});