如何在滾動時隱藏 header 導航，並在滾動停止時顯示

Question

我有一個導航 header（正常 HTML header 標簽）。 我想在用戶向下滾動時將其淡出，但在用戶停止滾動時顯示它（延遲 1 秒后）。

如何使用 jQuery 實現這一目標？ 這是我到目前為止所得到的：

 jQuery(function($){
    var lastScrollTop = 0, delta = 15;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");

   } else {
      // upscroll code
      $("header").css("top","32px");
   }
       lastScrollTop = st;
    });
});

Answer 1

這可能會對您有所幫助，請嘗試在您的代碼中實現此示例：在此示例中，我們正在設置滾動事件，因此每次用戶執行滾動操作時都會執行以下操作：

1. 淡出 header。
2. 如果在 t var 中設置了 Time out，請清除它。
3. 將超時設置為 1 秒，在此超時后執行的操作是再次淡入 header。

因此，每次如果移動一個滾動點，就會調用事件，header 淡出，我們設置一個超時以在 1 秒后顯示 header，但在此之前如果另一個滾動點移動，事件再次被調用。 並且之前的計時器被清除。 這一直持續到，用戶停止滾動，然后最后一次退出 function 成功執行並再次淡入 header。

 $(function(){ var t; document.addEventListener('scroll',function(e){ $("#Header").fadeOut(500); clearTimeout(t); checkScroll(); }); function checkScroll(){ t = setTimeout(function(){ $("#Header").fadeIn(500); },1000); /* You can increase or reduse timer */ } });

 html, body { height: 1200px; margin: 0; padding: 0; width: 100%; } #Header { background: red; height: 100px; left: 0; position: fixed; top: 0; width: 100%; } #Header table { height: 100%; width: 100%; } #Body { background: grey; height: 200%; margin-top: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="Header"> <table> <tr> <th>HEADE R bar</th> </tr> </table> </div> <div id="Body"> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> </div>

In your code, rather than using fading effect, position of header is changed, so when the position of the header is change to hide it, set the timer to bring it back, in this way you show the header when scrolling stops.

$(function(){
    var lastScrollTop = 0, delta = 15;
    var t;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");
      clearTimeout(t);
      checkScroll();
   }
       lastScrollTop = st;
    });

  function checkScroll(){
          t = setTimeout(function(){
             $("header").css("top","0px");
          },1000); /* You can increase or reduse timer */
  }
});  

Answer 2

我最終得到以下代碼：

jQuery(function($){
    var lastScrollTop = 0, delta = 15;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();

       if(Math.abs(lastScrollTop - st) <= delta)
          return;
if ((st > lastScrollTop) && (lastScrollTop>0)) {
       // downscroll code
      $("header").css("top","-80px");

   } else {
      // upscroll code
      $("header").css("top","32px");
   }
       lastScrollTop = st;
    });
});

代碼筆： https://codepen.io/Canvasandcode/pen/bGGeWrj