如何创建像这个链接这样的响应式粘性导航

【问题标题】：How to create responsive sticky navigation like this link如何创建像这个链接这样的响应式粘性导航
【发布时间】：2017-10-10 12:50:47
【问题描述】：

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

当您向上滚动某些 px 时屏幕关闭，然后某些 px 再次向上滚动并再次在顶部作为固定导航栏可见

【问题讨论】：

嗨，欢迎来到 Stack Overflow！请参阅Tour，阅读How to Ask 以及如何创建minimal reproducible example。发布一些您尝试过的代码。就目前而言，您的问题过于宽泛，我们无法有效地帮助您。我们将帮助您解决特定问题，但不会为您编写。这就是网络的美妙之处：你想看看它是如何完成的，检查页面。代码已经为您准备好了...

标签： javascript jquery html css

【解决方案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;
}

  $(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

【讨论】：

请告诉我你为什么投反对票，然后我可以自己解决问题。