JSFiddle - React, Tailwind, and code Playground

by jayakrishnancn

HTML

<div id="s-nav">
  
</div>
<div id="s-nav-placeholder"></div>

CSS

#s-nav {
  height: 70px;
  width: 100%;
  position: relative;
  -webkit-transition: top 0.75s ease;
  -moz-transition: top 0.75s ease;
  -ms-transition: top 0.75s ease;
  -o-transition: top 0.75s ease;
  transition: top 0.75s ease;
}

#s-nav_placeholder {
  height: 70px;
  width: 100%;
  display: none;
}

#s-nav.stick {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
}

JavaScript

$(document).ready(function() {

$(window).scroll(function() {
  if ($(window).scrollTop() > 300) {
    $('#s-nav').addClass('stick');
    $('#s-nav_placeholder').css({display: 'block'});
  }
  if ($(window).scrollTop() < 300) {
    $('#s-nav').removeClass('stick');
    $('#s-nav_placeholder').css({display: 'none'});
  }
});

});