JSFiddle - React, Tailwind, and code Playground

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: 300px;
}

JavaScript

$(document).ready(function(){
		$('section').waypoint(function(direction) {
          var me = $(this); //added
		  thisId = $(this).attr('id');
		  $('ul li').each(function(){
		    var secondaryID = $(this).attr('class');
		    if  ( secondaryID == thisId )
		        {
		        	$('ul li').removeClass('active');
                    
                    //added
                    if(direction==='up'){
                        me = $(this).prev();
                    }
                    
                    //added
                    if(!me.length){
                        me = $(this);
                    }
                    
		            $(this).addClass('active');
		        }
			});
	},{offset: '0'});	
});	
$('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
            }, 500);
            return false;
        }
    }
});