JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<nav id="main">
    <ul>
        <li><a href="#top" class="scroll" id="top1"></a></li>
        <li><a href="#middle" class="scroll" id="middle1"></a></li>
        <li><a href="#bottom" class="scroll" id="bottom1"></a></li>
    </ul>
</nav>
<section id="top">
    1
</section>

<section id="middle">
    2
</section>

<section id="bottom">
    3
</section>

CSS

nav#main { position:fixed; top:45%; right:20px; z-index:9999; }

/* I added #main to the selector of the active class */

nav#main a:hover, nav#main li.active a { background: #ff0; }
nav#main a { margin-bottom:10px; background: #000; display:block; height:15px; width:15px; overflow:hidden; }

#top { width:100%; height:800px; background: #eee; }
#middle { width:100%; height:800px; background: #ddd; }
#bottom { width:100%; height:640px; background: #aaa; }

body { font-size: 100px; }

JavaScript

$(document).ready(function(){
 $("#top1").parent().addClass('active');
var main = main = $('#main ul');

$('.scroll').click(function(event) {
        
    event.preventDefault();
 
    var full_url = this.href,
        parts = full_url.split('#'),
        trgt = parts[1],
        target_offset = $('#'+trgt).offset(),
        target_top = target_offset.top;
        
    $('html, body').animate({scrollTop:target_top}, 500);
    
    /* Remove active class on any li when an anchor is clicked */
    
    main.children().removeClass();
    
    /* Add active class to clicked anchor's parent li */
        
    $(this).parent().addClass('active');

});
    
    $(window).scroll(function(event) {
   if($("#top").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
 $("#top1").parent().addClass('active'); 
$("#middle1").parent().removeClass('active'); 
 $("#bottom1").parent().removeClass('active');        
} 
 if($("#middle").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#middle1").parent().addClass('active'); 
$("#top1").parent().removeClass('active'); 
 $("#bottom1").parent().removeClass('active'); 
}
 if($("#bottom").offset().top < $(window).scrollTop() + $(window).outerHeight()){
$("#bottom1").parent().addClass('active'); 
  $("#top1").parent().removeClass('active'); 
 $("#middle1").parent().removeClass('active'); 
}       
});
});