javascript - 滚动上的 jQuery 总是切换到隐藏

Question

我正在使用这个 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;
});

它按预期工作，但我只希望它在用户向下滚动页面 500 像素后启动。

我已将该函数包装在另一个函数中以实现此结果:

$(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;
        });

    }
});

但是，随着这个添加，当向上或向下滚动超过 500 像素时，切换总是恢复为 class=hidden。

Answer 1

你的逻辑不太对。您只需在当前的 scroll 处理程序中添加 if 条件。试试这个:

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