JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div class="navwrap">
    <div id="nav">NAVIGATION</div>
</div>
<div id="fill"></div>

CSS

.navwrap {
    position:fixed;
    width:100%;
    z-index:9999;
    opacity:0;
    transition: all 0.4s ease-in-out 0s;
}
.sticky.navwrap {
    opacity:1;
    transition: all 0.4s ease-in-out 0s;
}
#nav {
    width:100%;
    height:50px;
    background-color:#FF6600;
    color:#000000;
    text-align:center;
    font-size:18px;
    line-height:50px;
}
#fill {
    width:100%;
    height:2000px;
    background-color:#DEDEDE;
    margin:0 auto;
}

JavaScript

$(window).bind('scroll', 'load', function(){
            var                 
				navwrap = $('.navwrap'),
                scrollTop = $(document).scrollTop(),
				limit = 600;
           if (scrollTop >= limit) {
			   navwrap.addClass('sticky');
			                 
           } else if (scrollTop <= limit) {
			   navwrap.removeClass('sticky');              
           }
        });