ハンドヘルド デバイス用のこの navbar hider スクリプトがあります。
function bindNavUp() {
var lastScrollTop = 0, delta = 5;
$(window).on('scroll', function() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta) {
return;
};
if (st > lastScrollTop) {
// downscroll code
$('header.main').css('top','-50px').hover();
}
else {
// upscroll code
$('header.main').css('top','0');
};
lastScrollTop = st;
});
};
function unbindNavUp() {
$(window).unbind('scroll');
};
function handleNavUp() {
if ($(window).width() < 1600) {
bindNavUp();
}
else {
unbindNavUp();
};
};
$(document).ready(function() {
var timer;
$(window).on('load resize scroll', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleNavUp();
}, 100);
});
handleNavUp();
});
これに関する問題は、アップスクロールが Jquery 2.2.1 でうまく機能することです。
https://jsfiddle.net/Lanti/03kw42o1/4/
しかし、Jquery 3 Beta 1 では、ヘッダーの非表示の要素が戻ってきません (最新の Firefox を使用しています)。
https://jsfiddle.net/Lanti/03kw42o1/5/
また、Jquery 3 では多くのコンソール エラーが発生します。TypeError: c is null
Jquery 2.2.1 ではこのようなことはありませんが、どちらの場合も、このスクリプトが私のデザインの通常の非応答ビューに適用されると、パフォーマンスが大幅に低下するように感じます。