JSFiddle - React, Tailwind, and code Playground

by Tushar Thakare

HTML

<div id="viewport_helper"></div>

<ul id="menu">
    <li>Rammstein</li>
    <li>Metallica</li>
    <li>Jhon 5</li>
</ul>
<div id="container">
    <h1 class="title">Rammstein</h1>
    <p>
    What up everyone, how are you doing. What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.
    </p>
    <h1 class="title">Metallica</h1>
    <p>
    What up everyone, how are you doing. What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.
    </p>
    
    <h1 class="title">Jhon 5</h1>
    <p>
    What up everyone, how are you doing. What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are you doing.What up everyone, how are...

CSS

body{
    padding-top:20px;
    font-family:"Courier New", Courier, monospace;    
}

h1{
  font-size:30px;    
  font-weight: bold;
  margin-top:20px;
}


#viewport_helper{
    height: 1px;
    width: 1px;
    position: fixed;
    left: 0;
    top: 0;    
}

#menu{
    position:fixed;
    left:10px;
    top:50px;
    width:100px;
}

#menu li {
    line-height:30px;    
}

#menu li.current{
    background:red;    
}

#container{
    margin-left:160px;    
}

JavaScript

$(window).on("scroll load",function(){    
    var once = true;
    $(".title").each(function(ele, index){
        if($(this).offset().top > $("#viewport_helper").offset().top && once){                
            var index = $(this).index(".title");
            $(".current").removeClass('current')        
            $("#menu li").eq(index).addClass('current')
            once = false;
        }
    });        
})