如何創建像此鏈接這樣的響應式粘性導航

Question

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

當您向上滾動某些 px 會關閉屏幕，然后某些 px 向上滾動並再次在頂部作為固定導航欄可見

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;
      }
  });
});

現場演示