我正在使用以下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以应对由于渲染器无法跟上滚动速度而导致值跳跃的情况。

07-24 09:44
查看更多