JSFiddle - React, Tailwind, and code Playground

by acturbo

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;
    
}

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') ) ){
            menu.addClass('menu-light');
        }else{
            menu.removeClass('menu-light');
        }            

    });
});