javascript - 调整窗口大小时无法禁用滚动功能

Question

我有两个在滚动时淡入和淡出的菜单。但是当我调整窗口大小时我想停止这个事件。我尝试了很多东西，搜索了很多，但没有任何效果。我缺少一些东西。这是我所拥有的:

var scrollHandler = $(window).scroll(function() {
  var top = $(window).scrollTop();
  if (top > 0) {
    $('.menu').fadeOut('fast', function() {
      $('.second-menu').fadeIn('fast');
    });
  } else {
    $('.second-menu').fadeOut('fast', function() {
      $('.menu').fadeIn('fast');
    });
  }
})

scrollHandler;

if ($(window).width() < 768) {
  $(window).off("scroll", scrollHandler);
}

任何帮助都会很棒，谢谢!

Answer 1

$(window).width()仅在运行时评估(即执行脚本时视口(viewport)的宽度)。它不是 react 性的，因为它会在视口(viewport)大小调整时即时更新。

因此，如果你想监听宽度的变化，你必须将逻辑放在窗口调整大小事件回调中:

$(window).resize(function() {
  if ($(window).width() < 768) {
    $(window).off('scroll');
  }
});

此外，您的代码存在几个问题。

1. scrollHandler 应引用/定义函数，而不是绑定(bind)的结果
2. 调用 scrollHandler 不会执行任何操作。如果您按照 #1 进行更改，那么您可以简单地使用 $(window).on('scroll',scrollHandler);
绑定(bind)逻辑
3. .off() 方法不接受第二个参数，这就足够了:$(window).off('scroll')

重构后，您的代码将如下所示:

var scrollHandler = function() {
  var top = $(window).scrollTop();
  if (top > 0) {
    $('.menu').fadeOut('fast', function() {
      $('.second-menu').fadeIn('fast');
    });
  } else {
    $('.second-menu').fadeOut('fast', function() {
      $('.menu').fadeIn('fast');
    });
  }
};

// Bind scrollHandler firing to scroll event
$(window).on('scroll', scrollHandler);


$(window).resize(function() {
  if ($(window).width() < 768) {
    $(window).off('scroll');
  }
});

<小时/>

注意:

如果您想从中获得最佳性能，您应该限制调整大小事件，以便回调函数不会过于频繁地触发。 Lodash/Underscore.js有实用函数(_.throttle())，并且还有一个 jQuery plugin available .

在 Lodash/Underscore.js 中:

$(window).resize(_.throttle(function() {
  if ($(window).width() < 768) {
    $(window).off('scroll');
  }
}, 100));

使用 Ben Alman 的 jQuery 插件:

$(window).resize($.throttle(100, function() {
  if ($(window).width() < 768) {
    $(window).off('scroll');
  }
}));