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() 仅在运行时评估（即执行脚本时视口的宽度）。在视口调整大小时，它将在动态更新时无法被动反应。

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

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

此外，您的代码存在一些问题。

scrollHandler应该引用/定义函数，不绑定的结果
致电scrollHandler没有做任何事情。如果按照＃1进行更改，则可以使用$(window).on('scroll', scrollHandler);
.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');
  }
});

注意：

如果你想从中获得最佳性能，你应该限制resize事件，以便不会过于频繁地触发回调函数。 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');
  }
}));

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

1 个答案:

注意：