我一直在开发具有固定标题的移动版本的网站,我希望在向下滚动以隐藏导航时获得相同的效果,仅在向上滚动超过 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;
});
});