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吗？

Teehan＆amp; Lax用javascript隐藏标题 - 隐藏向下滚动，显示向上滚动

1 个答案: