JSFiddle - React, Tailwind, and code Playground

by Rohit Azad

HTML

<div class="navBar">
    <ul>
        <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
         <li>Hello</li>
    </ul>
</div>

<br>Hello break down<br>
    <br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br><br>Hello break down<br>

CSS

.navBar{
    
    margin-top:50px;
    background:green;
    padding:10px;
    margin-left:auto;
    margin-right:auto;
    width:200px;
}
.fCalss{
    position:fixed;
    top:0;
    margin-top:0;
    z-index: 9999;
}

JavaScript

$(document).ready(function(){
    var nav = $('.navBar');
    
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
        nav.addClass('fCalss');
        }else{
        nav.removeClass('fCalss');
        }
    });
});