JSFiddle - React, Tailwind, and code Playground

by karan3112

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" data-color="#333">section1</div>
        <div class="section" id="section2" data-color="#fff">section2</div>
        <div class="section" id="section3" data-color="#333">section3</div>
        <div class="section" id="section4" data-color="#fff">section4</div>
        <div class="section" id="section5" data-color="#333">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;
}

JavaScript

$(function(){
$(window).on('scroll', function() {
    var scrollTop = $(this).scrollTop();
    $('.section').each(function() {
        var topDistance = $(this).offset().top;
        if ( (topDistance) < scrollTop ) {
            $('#mymenu a').css('color',$(this).attr('data-color'));
        }
    });
});
})