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(){
		$('section').waypoint(function(direction) {
		  sectionId = $(this).attr('id');
		  $('ul li').each(function(){
		  var liClass = $(this).attr('class');
		    if  ( liClass == sectionId )
		        {
                    if(direction === 'down'){
                        $('ul li').removeClass('active');
                        activeItem = $(this);
                        activeItem.addClass('active');
                    }
		        }
			});
	},{offset: '1'});	
    $('section').waypoint(function(direction) {
        sectionId = $(this).attr('id');
        $('ul li').each(function(){
            var liClass = $(this).attr('class');
            if  ( liClass == sectionId )
            {
                if(direction === 'up'){
                    $('ul li').removeClass('active');
                    activeItem = $(this);
                    activeItem.addClass('active');
                }
            }
        });
    },{offset: '-1'});    
});	
$('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;
        }
    }
});