jQuery窗口调整大小 - 开始和停止事件？答案

【问题标题】：jQuery window resize - start and stop event?jQuery窗口调整大小 - 开始和停止事件？
【发布时间】：2014-03-13 10:05:45
【问题描述】：

#right 元素应在视口大于 960 像素时自动滚动，如果视口较小则停止。如果我从一个缩放到超过 960 像素的小视口开始，它已经可以了。如果我将其缩小到小于 960 像素，它仍在滚动。谁能帮我解决这个问题？

function checkWidth() {
    var windowSize = $(window).width();

    if (windowSize < 960) {
      $(window).scroll(function() {    
        var space = $(window).scrollTop();   
        return 0;    
      }); 
    }
    else {
      $(window).scroll(function() {    
        var space = $(window).scrollTop();   
        return $('#right').animate({top: space}, {queue: false});    
      }); 
    }
}

// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);

【问题讨论】：

标签： jquery resize window viewport

【解决方案1】：

我认为你需要这个：jQuery.stop() 如果窗口较小：

if (windowSize < 960) {
  $(window).scroll(function() {    
    var space = $(window).scrollTop();   
    return $('#right').stop();    
  }); 
}

【讨论】：

谢谢！ .stop() 对我来说效果很好。但是如果我滚动，元素正在移动，我将窗口重新调整到小于 960 像素，元素被卡住了。你知道如何让它达到初始顶部位置吗？
使用.animate() 并滚动到顶部或考虑if (windowSize < 960) { 语句中的.scrollTo 特定对象。

【解决方案2】：

您在每次调整大小时都绑定了新的滚动事件。作为一个简单的修复，取消绑定事件：

function checkWidth() {
    var windowSize = $(window).width();

    if (windowSize < 960) {
      $(window).off('scroll').scroll(function() {    
        var space = $(window).scrollTop(); // don't know what you are expecting here???   
        return 0;    
      }); 
    }
    else {
      $(window).off('scroll').scroll(function() {    
        var space = $(window).scrollTop();   
        $('#right').animate({top: space}, {queue: false});    
      }); 
    }

}

顺便说一句，您也可以像@Michal 的回答那样使用.stop()。

【讨论】：