JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

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

CSS

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

JavaScript

$(document).ready(function(){
        $('section').waypoint(function(direction) {
            //var activeSection = $(this).next();
            var activeSection = $(this);
            if(direction === 'down'){
                activeSection = $(this).next();
            }
            //activeSection = $(this);
            var sectionId   = activeSection.attr('id');
            $('ul li').removeClass('active');
            $('ul li.' + sectionId).addClass('active');
            console.log(activeSection);
        });
});	

$('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 - (target.height() / 5)
            }, 500);
            return false;
        }
    }
});