Javascript 如何创建像此链接一样的响应性粘性导航

当你向上滚动某些px时，屏幕会关闭，然后再次向上滚动某些px，并在顶部显示为一个固定的导航栏

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

JS

$（文档）.ready（函数（）{
var=false；
var height=$（'#nav'）。outerHeight（）；//特定像素
$（文档）。滚动（函数（）{
var scroll=$（document.scrollTop（）；
如果（滚动>高度）{
$（#nav'）.css（{'position'：'fixed'，'top'：'0'，'left'：'0'}，300）；
if（隐藏==false）{
$（'#nav'）.css（'display'，'none'）；
$（'导航'）.slideDown（）；
隐藏=真实；
}}否则如果（滚动嗨，欢迎使用Stack Overflow！请查看、阅读和如何创建。发布一些您尝试过的代码。目前，您的问题太广泛，我们无法有效地帮助您。我们将帮助您解决一个特定问题，但不会为您编写。这就是web的魅力：您想了解它是如何完成的，请查看页面。代码是已经有你了……请告诉我你为什么投了反对票，然后我可以自己解决。
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;
      }
  });
});