JSFiddle - React, Tailwind, and code Playground

by ameen

HTML

<script src="//cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.js"></script>
<ul>
    <li class="test"><a href="#test"></a></li>
    <li class="test2"><a href="#test2"></a></li>
    <li class="test3"><a href="#test3"></a></li>
    <li class="test4"><a href="#test4"></a></li>
    <li class="test5"><a href="#test5"></a></li>
</ul>
<section id="test"></section>
<section id="test2"></section>
<section id="test3"></section>
<section id="test4"></section>
<section id="test5"></section>

CSS

section {
    height: 300px;
    margin: 1px;
    background: red; 
}
ul {
    position: fixed;
}
li {
    list-style: none;
    width: 100px;
    height: 10px;
}
li a {
    display: block;
    width: 100px;
    margin: 2px;
    height: 10px;
    background: blue;
}
li.active a {
    background: green;
}
body {
    padding-bottom: 800px;
}

JavaScript

$(document).ready(function(){
        lastScrollTop = 0;
        setOffset = 1;
        $(window).scroll(function(event){
            var st = $(this).scrollTop();
            if (st > lastScrollTop){
                setOffset = 1;
            } else {
                setOffset = -1;
            }
            lastScrollTop = st;
        });
        $('section').waypoint(function(direction) {
            sectionId = $(this).attr('id'); 
            
            $('ul li').each(function(){
                var liClass = $(this).attr('class');
                if  ( liClass == sectionId )
                {
                    $('ul li').removeClass('active');
                    activeItem = $(this);
                    activeItem.addClass('active');
                }
            });
        },{offset: setOffset});	
});	

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top -1
            }, 500);
            return false;
        }
    }
});