JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<body>
    <div class="placer">
        <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>
    </div>
    <div id="block_one" >первый див</div>
    <div id="block_two" >второй див</div>
    <div id="block_three" >третий див</div>
    <div id="block_four" >четвертый див</div>
</body>

CSS

* {
    margin:0;
    padding:0;
}
.menu {
    background:silver;
    position:fixed;
    display:block;
    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;
}
.active {
    background:red;
}
.placer {
    height:40px;
    position:relative;
}

JavaScript

$(document).ready(function () {

     //Get Sections top position
     function getTargetTop(elem) {

         //gets the id of the section header
         //from the navigation's href e.g. ("#html")
         var id = elem.attr("href");

         //Height of the navigation
         var offset = 43;

         //Gets the distance from the top and 
         //subtracts the height of the nav.
         return $(id).offset().top - offset;
     }

     //Smooth scroll when user click link that starts with #
     $('a[href^="#"]').click(function (event) {

         //gets the distance from the top of the 
         //section refenced in the href.
         var target = getTargetTop($(this));


         //scrolls to that section.
         $('html, body').animate({
             scrollTop: target
         }, 500);

         //prevent the browser from jumping down to section.
         event.preventDefault();

     });

     //Pulling sections from main nav.
     var sections = $('a[href^="#"]');

     // Go through each section to see if it's at the top.
     // if it is add an active class
     function checkSectionSelected(scrolledTo) {

         //How close the top has to be to the section.
         var threshold = 40;

         var i;

         for (i = 0; i < sections.length; i++) {

             //get next nav item
             var section = $(sections[i]);

             //get the distance from top
             var target = getTargetTop(section);

             //Check if section is at the top of the page.
             if (scrolledTo > target - threshold && scrolledTo < target + threshold) {

                 //remove all selected elements
                 sections.removeClass("active");

                 //add current selected element.
                 section.addClass("active");
             }

         };
     }


     //Check if page is already scrolled to a section.
     checkSectionSelected($(window).scrollTop());

     $(window).scroll(function (e) {
        ...