JSFiddle - React, Tailwind, and code Playground

by jho1086

HTML

<div id="wrapper">
  <div id="nav"><div id="navcont">NAV</div></div> 
</div>

CSS

#wrapper {height:1000px; border:1px solid #f00;}
#nav, #navcont {height:50px; width:100%;}
#nav {position:relative; top:100px;}
#navcont {position:absolute; top:0; background:#f00; text-align:center;}

JavaScript

if($("body").length){
	var d=$("#navcont").offset().top;
  $(window).scroll(function(){
    var i=$(window).scrollTop();
    i>=d?$("#navcont").css({position:"fixed", top:10}):$("#navcont").css({position:"absolute"});
  });
}