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;
}
.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 () {
        var aidREF = $("li a[href]");    
        aidREF.on('click', function () {
        var liC = $(this).attr("href");
        var liD = $("#" + liC).offset().top;
        $("html, body").stop().animate({
            scrollTop: liD
        }, 'slow');
        return false;
    });

    $(window).on('scroll', function () {
        $('.dober').each(function () {
            var hRt = $(this).attr('id');
            var divLink = $('a[href=' + hRt + ']');
            var realLink = $('li a');
            if ($(this).offset().top <= $(window).scrollTop()) {

                realLink.css({
                    padding: 0
                });
                divLink.css({
                    padding: 10
                });

            } else {

                divLink.css({
                    padding: 0
                });
            }
        });

    });

});