JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
      <div id="menu-center">
          <ul>
              <li><a id="me1" class="inactive" href="#home-section">Home</a></li>
              <li><a id="me2" class="inactive" href="#portfolio-section">Portfolio</a></li>
              <li><a id="me3" class="inactive" href="#about-section">About</a></li>
              <li><a id="me4" class="inactive" href="#contact-section">Contact</a></li>
              <li></li>
              <li></li>            
          </ul>
      </div>
    </div>
    <div id="home-section">no</div>
    <div id="portfolio-section">should be red!</div>
    <div id="about-section">no</div>
    <div id="contact-section">no</div>

CSS

.menu, .menu a{
    background-color: #ffffff;
    
}

.menu-light, .menu-light a{
    background-color: #cc0000;
    
}
.menu{height:1000px;}
#home-section{height:1000px;}
#portfolio-section{height:1000px;}

JavaScript

function isInView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(document).ready(function () {
var menu = $('.menu');
    $(window).scroll( function () {
        if (isInView('#portfolio-section') ){
        alert(1);
            menu.addClass('menu-light');
        }else{
            menu.removeClass('menu-light');
        }            

    });
});