JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
    <div id="left_side">
        <div id="static_menu" class="">                 
            <div id="main_navigation" class="">
                <ul class="menu mainLeft" class="mymenu">
                    <li><a href="#section1">Nav list 1</a></li>
                    <li><a href="#section2">Nav list 2</a></li>
                    <li><a href="#section3">Nav list 3</a></li>
                    <li><a href="#section4">Nav list 4</a></li>
                    <li><a href="#section5">Nav list 5</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="wrapper">
        <div class="section" id="section1">section1</div>
        <div class="section" id="section2">section2</div>
        <div class="section" id="section3">section3</div>
        <div class="section" id="section4">section4</div>
        <div class="section" id="section5">section5</div>
    </div>
</div>

CSS

.content{
    position:relative;
}

#left_side
{
    position:fixed;
    left: 20px;
    right: 20px;
    z-index:999;
}
.mainLeft
{
    list-style-type:none;
    margin-left:0px;
    padding-left:0px;
}
.mainLeft li
{
    padding:5px 0;
}
.mainLeft li a
{
    color:#000;
    margin-bottom:5px;
}

#wrapper
{
    position:relative;
}

.section
{
    width: 100%;
    text-align:center;
    padding:150px 0;
    border:1px solid #666;
}

#section1
{
    background: #fff;
}

#section2
{
    background: #000;
    color:#fff;
}

#section3
{
    background: #fff;
}

#section4
{
    background: #000;
    color:#fff;
}

#section5
{
    background: #fff;
}


/* new CSS */
.mainLeft li.whiteText a {
    color: #fff;
}
.section {
    height: 18px;
    overflow: hidden;
}

JavaScript

$(window).scroll(function() {

    /* get current scroll-position within window */
    var scroll = $(window).scrollTop();
    
    $('.mainLeft li').each(function() {

        /* get position of navigation-element (distance from top minus half of it's height, so that it changes color while it's half over black and half over white background) */
        var elementPositionTop = parseFloat($(this).offset().top) + (parseFloat($(this).height() / 2));

        /* change color for each background-change */
        if (elementPositionTop >= 320 && elementPositionTop <= 640 || elementPositionTop >= 960 && elementPositionTop <= 1280) {
            $(this).addClass('whiteText');
        } else {
            $(this).removeClass('whiteText');
        }
    });
});