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

Question

{{3}}

当你向上滚动时某些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;
      }
  });
});

Live Demo