Question

当屏幕滚动到某个偏移量之上时，我有以下代码调用某个函数。

var $window = $(window);
var doFunct = function () {
    if ($window.scrollTop() > 200) {
       console.log('Above 200');
    } else {
       console.log('below 200');
    }
}
$window.scroll(doFunct);

我想要实现的是，只有当scrollTop在高于200且低于200之间发生变化时，功能控制台才会记录。不是每次我滚动就像现在的情况一样！

Answer 1

您可以设置一个变量来指示已超过阈值。类似的东西：

var $window = $(window);
var threshold = false;
var doFunct = function () {
    if ($window.scrollTop() > 200) {
       if(!theshold){
          console.log('Above 200');
          theshold = true;
       }
    } else {
       if(theshold){
          console.log('below 200');
          theshold = false;
       }
    }
}
$window.scroll(doFunct);

Answer 2

自包含版本 - 即没有额外的“全局”版本

var $window = $(window);
var doFunct = (function () {
    var isBelow = true; // assuming a page loads with scrollTop == 0
    return function() {
        var top = $window.scrollTop();
        if (top > 200 && isBelow) {
           console.log('Above 200');
           isBelow = false;
        } else if (top <= 200 && !isBelow) {
           console.log('below 200');
           isBelow = true;
        }
    };
}());
$window.scroll(doFunct);

如何有效地处理窗口滚动

2 个答案: