2013-04-06 86 views
0

我一直在网站上的移动版本有一个固定的标题,我想获得同样的效果,而滚动下来隐藏导航,仅当您滚动超过5个像素时才显示它。Teehan&Lax隐藏标题与JavaScript - 隐藏向下滚动,显示在向上滚动

就像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; 
      }); 
     }); 

回答

0

您发布的JS看起来很不错,它可能更像是一个CSS问题。你可以发布与此一致的CSS吗?

+0

我最终放弃了它。这似乎并不值得。 – 2013-06-07 18:31:47