ヘッダーが固定されたモバイル バージョンの Web サイトで作業を行っています。下にスクロールしてナビゲーションを非表示にしているときに同じ効果を得たいのですが、上に 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;
});
});