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>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </div>
    <div id="home-section"></div>
    <div id="portfolio-section"></div>
    <div id="about-section"></div>
    <div id="contact-section"></div>

CSS

.menu, .menu a{
    color: blue;
    
}

.menu-light, .menu-light a{
    color: red;
    
}

JavaScript

$(document).ready(function () {
    
    var menu = $('.menu');
    
    var portfolio_position = $('#portfolio-section').offset().top;
    var about_position = $('#about-section').offset().top;
    var contact_position = $('#contact-section').offset().top;

    $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        if (scroll >= portfolio_position) {
            menu.addClass('menu-light');
        }else{
            menu.removeClass('menu-light');
        }
    });
});