我正在使用以下jQuery代码片段在向下滚动时隐藏菜单,并在向上滚动时显示:
var prev = 0;
var $window = $(window);
var nav = $('.nav');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});
它可以按预期工作,但我只希望在用户向下滚动页面500px后启动它。
我将函数包装在另一个函数中以实现此结果:
$(window).scroll(function() {
if ($(this).scrollTop() >= 500) {
var prev = 0;
var $window = $(window);
var nav = $('.nav');
$window.on('scroll', function(){
var scrollTop = $window.scrollTop();
nav.toggleClass('hidden', scrollTop > prev);
prev = scrollTop;
});
}
});
但是,添加此选项后,上下滚动超过500px时,切换始终恢复为class = hidden。
最佳答案
您的逻辑不太正确。您只需要在当前if
处理程序中添加scroll
条件。尝试这个:
var prev = 0;
var $window = $(window);
var nav = $('.nav');
$window.on('scroll', function() {
var scrollTop = $window.scrollTop();
if ($(this).scrollTop() >= 500) {
nav.toggleClass('hidden', scrollTop > prev);
} else {
nav.addClass('hidden');
}
prev = scrollTop;
});
请注意,添加了
else
以应对由于渲染器无法跟上滚动速度而导致值跳跃的情况。