Teehan＆Lax隱藏標題與JavaScript - 隱藏向下滾動，顯示在向上滾動

Question

我一直在網站上的移動版本有一個固定的標題，我想獲得同樣的效果，而滾動下來隱藏導航，僅當您滾動超過5個像素時才顯示它。

就像teehanlax.com。我用一些我在網上找到的代碼給了它一個鏡頭，但它表現很奇怪。它隱藏在向下滾動，但只是再次顯示，看似...隨機。

這是我的代碼。

//Hide Header on on scroll down 
     $(function(){ 
      var lastScrollTop = 0, delta = 5; 
      $(window).scroll(function(event){ 
       var st = $(this).scrollTop(); 

       if(Math.abs(lastScrollTop - st) <= delta) 
        return; 

       if (st > lastScrollTop){ 
        // Scroll Down 
        $("header").delay(100).queue(function() { 
         $(this).addClass("animated fadeOutUp"); 
         $(this).dequeue(); 
        }); 

       } else { 
        // Scroll Up 
        $('header').delay(100).queue(function() { 
         $(this).removeClass("fadeOutUp").addClass("animated fadeInDown"); 
         $(this).dequeue(); 
        }); 
       } 
       lastScrollTop = st; 
      }); 
     }); 

Answer 1

您發佈的JS看起來很不錯，它可能更像是一個CSS問題。你可以發佈與此一致的CSS嗎？