JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

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

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

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

        </li>
        <li><a href="block_four">Fourth 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;
}
.menu {
    background:silver;
    position:fixed;
    display:block;
    border:1px solid black;
    list-style:none;
    zoom:1;
}
li {
    float:left;
}
li a {
    text-decoration:none;
    margin:0 15px;
    line-height:25px;
    display:block;
}
div {
    height:400px;
    border:1px solid #dfdfdf;
}

JavaScript

$(function () {

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

    $(window).scroll(function () {
        $('.dober').each(function () {
            var hRt = $(this).attr('id');
            var moH = $(".menu").outerHeight();
            if ($(this).offset().top <= $(window).scrollTop()+moH) {
         
                $('li a').css({ padding: 0 });                  
                $('a[href=' + hRt + ']').css({
                    padding: 10
                });

            } else {
                
                 $('a[href=' + hRt + ']').css({
                    padding: 0
                });
            }
        });

    });

});