JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<body>
    <ul class="menu">
        <li><a href="block_one" class="liD">Firset element</a>

        </li>
        <li><a href="block_two">Firset element</a>

        </li>
        <li><a href="block_three">Firset element</a>

        </li>
        <li><a href="block_four">Firset element</a>

        </li>
    </ul>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="block_one" class="dober">первый див</div>
    <div id="block_two" class="dober">второй див</div>
    <div id="block_three" class="dober">третий див</div>
    <div id="block_four" class="dober">четвертый див</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>

CSS

* {
    margin:0;
    padding:0;
}

body {
    font-size:12px;
    font-family:Arial;
}

.menu {
    position:fixed;
    display:block;
    list-style:none;
    zoom:1;
}
li {
    float:left;
}
li a {
    border:2px solid white;
    text-decoration:none;
    font-weight:bold;
    margin:0 10px 0 0;
    padding:0 10px;
    background:#d4d4d4;
    line-height:35px;
    border-radius:3px;
    display:block;
    color:black;
} 

a.active {
    box-shadow:0 1px 6px #333;
    background:red;
}

div {
    padding-top:40px;
    height:400px;
}

JavaScript

$(function () {

    $("li a").click(function () {
        var liC = $(this).attr("href");
        var liD = $("#" + liC).offset().top;
        $("html, body").stop().animate({
            scrollTop: liD
        }, 'medium');
        return false;
    });

    $(window).scroll(function () {

        $('.dober').each(function () {
            var hRt = $(this).attr('id');
            if ($(this).offset().top <= $(window).scrollTop()) {
         
                $('li a').css({ color : "black" }).removeClass('active');                  
                $('a[href=' + hRt + ']').css({color: "white"}).addClass('active');

            } else {
                
               $('a[href=' + hRt + ']').css({color : "black"}).removeClass('active');; 
            }
        });

    });

});