JSFiddle - React, Tailwind, and code Playground

by js_test

HTML

<ul id="top-menu">
    <li class="active"><a href="#">Top</a></li>
    <li><a href="#foo">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
    <li><a href="#baz">Baz</a></li>
</ul>

<a id="foo">Foo</a>
<a id="bar">Bar</a>
<a id="baz">Baz</a>

CSS

body{
    height:6000px;
    font-family:Helvetica, Arial;
}
#top-menu{
    background: white;
    position: fixed;
    left: 0; right: 0;
    top: 0;
    z-index: 1;
}
#top-menu li{ float: left; }
#top-menu a{
    border-top: 3px solid white;
    color: #666;
    display: block;
    padding: 5px 25px 7px 25px;
    /* -webkit-transition: 1s all ease;
    -moz-transition: 1s all ease;
    transition: 1s all ease; */
    text-decoration: none;
}
#top-menu a:hover{ color: #000; }
#top-menu li.active a{
    border-top: 3px solid red;
    color: red;
    font-weight: bold;
}
#foo, #bar, #baz{ position: absolute; }
#foo{ top: 400px; }
#bar{ top: 800px; }
#baz{ top: 1200px; }

JavaScript

// Cache selectors
var lastId,
    $topMenu = $("#top-menu"),
    topMenuHeight = $topMenu.outerHeight()+15,
    menuItems = $topMenu.find("a"),
    scrollItems = menuItems.map(function(){
        var item = $($(this).attr("href"));
        if(item.length){ return item; }
    });

menuItems.click(function(e){
    e.preventDefault();
    
    var href = $(this).attr("href"),
        offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
    
    $('html, body')
        .stop()
        .animate({ scrollTop: offsetTop }, "slow");
});

// Bind to scroll
$(window).scroll(function(){
    
    // Get container scroll position
    // Get id of current scroll item
    var $fromTop = $(this).scrollTop()+topMenuHeight,
        cur = scrollItems.map(function(){
        var $scrollItems = $(this).offset().top;
        
        if ($scrollItems < $fromTop){
            return this;
        }
    });
    
    // Get the id of the current element
    var cur = cur[cur.length-1],
        id = cur && cur.length ? cur[0].id : "";
    
    if(lastId !== id){
        lastId = id;
        
        // Set/remove active class
        menuItems
            .parent()
            .removeClass("active")
            .end()
            .filter("[href=#"+id+"]")
            .parent()
            .addClass("active");
    }                   
});