JSFiddle - React, Tailwind, and code Playground

by blunderboy

HTML

<nav>
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Services</a>
        </li>
        <li><a href="#">Contact Us</a>
        </li>
    </ul>
</nav>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

CSS

body {
    font-family: helvetica;
    font-size: 18px;
}
nav {
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background-color:#ffffff;
}
li {
    display: inline;
}
nav a {
    text-decoration: none;
    padding: 10px;
}
#first {
    width: 100%;
    height: 200px;
    background: green;
}
#second {
    width: 100%;
    height: 600px;
    background: red;
}

#third {width: 100%;
height: 2000px;
background: purple;}

JavaScript

window.onscroll = function () {
    var offset = document.documentElement.scrollTop,
        lis = document.getElementsByTagName('li');

    var colorMap = [
        { value: 200, color : 'green'} ,
        { value: 800, color : 'red' },
        { value: 2800, color: 'purple'}
    ];
    
    console.log(offset);
        var isColorSet = false;
         for (var i=0; i<colorMap.length; i++) {
             lis[i].style.background='black';
             if (!isColorSet && offset < colorMap[i].value) {
                 lis[i].style.background = colorMap[i].color;
                 isColorSet = true;
             }
        }
}