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" id="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;
    top: 20px;
    padding:10px;
    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;
}

JavaScript

var _li, _sections;

$(function() {
   _li = $("#mymenu").find("li"); 
    _sections =  $("#wrapper").find(".section");   
    $(window).on('scroll', liBgs);
});


function liBgs() {
    for (var i = 0; i < _li.length ; i++) {
        var _litop = _li.eq(i).offset().top; 
        for (var j = 0; j < _sections.length; j++) {
            var $s = _sections.eq(j),
            _sectop = $s.offset().top,
            _secbottom = $s.offset().top+$s.height()-20;
            if (_litop > _sectop && _litop > _secbottom) {
                var _color = rgb2hex($s.css('background-color'));
                _li.eq(i).find('a').css('color',  (_color=="#ffffff") ? "#000000" : "#ffffff");
            }             
        }
        
    }
}

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}