How to create responsive sticky navigation like this link

Question

http://preview.themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/full_screen_preview/5484319

that when you scroll up certain px goes screen off and after again certain px scroll up and again visible on the top as a fixed navigation bar

Answer 1

HTML

<nav id="nav">NAV BAR</nav>

CSS

body{
  margin:0;
  height:200vh;
}
#nav{
  width:100vw;
  height:10vh;
  background-color:black;
  color:white;
  text-align:center;
  line-height:10vh;
}

JS

  $(document).ready(function(){
  var hiding = false;
  var height = $('#nav').outerHeight();//the certain pixel
  $(document).scroll(function(){
    var scroll = $(document).scrollTop();
    if (scroll >height){
     $('#nav').css({'position':'fixed','top':'0','left':'0'}, 300);
      if(hiding == false){
      $('#nav').css('display','none');
      $('#nav').slideDown();
        hiding= true;
      } } else if(scroll <height) {
        $('#nav').css('position','relative');
        hiding = false;
      }
  });
});

Live Demo