JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="menu">
  <ul class="mainNav">
    <li><a href="#home" id="homeNav" class="selected">Home</a></li>
    <li><a href="#about" id="aboutNav">About Us</a></li>
    <li><a href="#contact" id="contactNav">Contact</a></li>
   </ul>
</nav>
<div style="margin-top: 90px">
<div id="home" class="area" style="height: 200px; background-color: red;">Home</div>
<div id="about" class="area" style="height: 200px; background-color: blue;">About Us</div>
<div id="contact" class="area" style="height: 200px; background-color: orange;">Contact</div>
</div>
<div style="height: 200px;"></div>

CSS

body {
    margin: 0;
    padding: 0;
}
.selected {
    font-weight: bold;
}
#menu {
    position: fixed;
    top: 0;
    background-color:white;
    width: 100%;
}

JavaScript

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop() + 90;
        var currentArea = $('.area').filter(function() {
            return scroll <= $(this).offset().top + $(this).height();
        });
        $('nav a').removeClass('selected');
        $('nav a[href=#' + currentArea.attr('id') +']').addClass('selected');
        //console.debug('nav a[href=#' + currentArea.attr('id') +']');
    });
});