JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <nav>
        <ul>
            <li>section1</li>
            <li>section2</li>
            <li>section3</li>
            <li>section4</li>
        </ul>
    </nav>
    <div id="section1">
        <p>vccvfcwec</p>
    </div>
    <div id="section2">
        <p>vccvfcwec</p>
    </div>
    <div id="section3">
        <p>vccvfcwec</p>
    </div>
    <div id="section4">
        <p>vccvfcwec</p>
    </div>
</div>

CSS

.active {
    color:#fff !important;
}
#wrapper div p {
    font-size:40px !important;
}
#wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}
#section1 {
    width: 100%;
    height: 2000px;
    position: relative;
    background-color: yellow;
}
#section2 {
    width: 100%;
    position: relative;
    height: 2500px;
    background-color:red;
}
#section3 {
    width: 100%;
    position: relative;
    height: 1500px;
    background-color: green;
}
#section4 {
    width: 100%;
    position: relative;
    height: 1500px;
    background-color: blue;
}
nav ul {
    border: 1px solid;
    margin: 0;
    background-color: #222;
    height: 80px;
    margin: 0 0 90px;
    width: 100%;
    max-width: 1024px;
    position: fixed;
    z-index: 1;
}
nav ul li {
    list-style: none;
    margin: 30px 20px 30px 20px;
    display: inline;
    cursor: pointer;
    float: right;
}
nav ul li {
    color: #B5B5B5;
    text-decoration: none;
}

JavaScript

function animarScroll(altura) {
    $('html, body').stop().animate({
        scrollTop: altura
    }, 1500);
}

var ecra = $(document).height();
var seccoes = $('#wrapper div[id^=section]');
var lis = document.querySelectorAll('#wrapper li');
var alturas = seccoes.map(function (i) {
    return {
        elemento: lis[i],
        posicao: $(this).position().top + $(this).outerHeight(true)
    }
});

$('ul li').each(function (i, el) {

    $(el).click(function () {
        var posicaoSeccao = alturas[alturas.length - i].posicao;
        animarScroll(posicaoSeccao)
    });
});

$(window).scroll(function () {
    var winTop = $(window).scrollTop();
    for (var i = 0; i < alturas.length; i++) {
        var este = alturas[i];
        if (este.posicao > winTop) {
            $(lis).removeClass('active');
            $(alturas[i].elemento).addClass('active');
            break;
        }
    }
});