jQuery，如果窗口滚动了X个像素做这个，否则如果窗口滚动了XX个像素做别的

jQuery, if window has scrolled X pixels do this, else if has scrolled XX pixels do something else

本文关键字：像素 滚动 如果 窗口 XX jQuery      更新时间：2023-09-26

是否有一种方法，使用jQuery，根据窗口滚动的距离做不同的事情?

这是我现在使用的代码;

$(document).scroll(function() {
    // If scroll distance is 500px or greated
    if ( $(document).scrollTop() >= 500 ) {
        // Do something
    } else {
        // Go back to normal
    }
});

我想做的是这样的;

$(document).scroll(function() {
    // If scroll distance is 500px or greater
    if ( $(document).scrollTop() >= 500 ) {
        // Do something
    // If scroll distance is 1000px or greater
    } else if ( $(document).scrollTop() >= 1000 ) {
        // Do something else
    } else {
        // Go back to normal
    }
});

我试过了，但是它阻止了整个函数的工作。我哪里出错了吗?

看:如果滚动是1250px，它已经被>=500捕获了!

从最高值1000px开始测试 

 $(document).scroll(function() {
        if ( $(document).scrollTop() >= 1000 ) {
        } else if ( $(document).scrollTop() >= 500 ) {
        } else {
        }
    });

EDIT1 最好在检查时修复滚动值，而不是每次测试一个可能发生变化的值时调用它。这取决于你，不是绝对需要的:

$(document).scroll(function() {
           var value=$(document).scrollTop();/* <== here*/
            if ( value >= 1000 ) {
            } else if ( value >= 500 ) {
            } else {
            }
        });

EDIT2 代码漂亮吗?

$(document).scroll(function() {
               var value=$(document).scrollTop();
                if ( value >= 1000 ) { /*do this*/; return;}
                if ( value >= 500 ) { /*do this*/; return;}
                if ( value >= 150 ) { /*do this*/; return;}
                if ( value >= 30 ) { /*do this*/; return;}
                /* else */
                /*do this*/
            });

EDIT2 代码可配置?

var thresholds=[1000, 500, 150];
    $(document).scroll(function() {
                   var value=$(document).scrollTop();
                   for(int i=0; i<thresholds.length; i++){
                         if (value >= thresholds[i]) {
                              /*do this*/; return;
                         }//end if
                    }//end for
                    /* else */
                    /*do this*/
                });

以下几点:

  1. 重新排序你的条件，从最高的数字开始，否则第二个条件将永远不会被触发。(如果滚动距离是1001px，那么它大于500，将触发第一个条件，从而绕过第二个条件，因为它是else if)

  2. 缓存滚动值，这样您就不必在每次条件检查中重新评估它:

    $(document).scroll(function() {
        var scrollDistance = $(document).scrollTop();
        // If scroll distance is 500px or greater
        if ( scrollDistance >= 1000 ) {
            // Do something else
        // If scroll distance is 1000px or greater
        } else if ( scrollDistance >= 500 ) {
            // Do something
        } else {
            // Go back to normal
        }
    });

$(document).scroll(function() {
    $top = $(document).scrollTop();
    // If scroll distance is 500px or greater
    if ($top >= 500 && $top < 1000) {
        // Do something
    }
    // If scroll distance is 1000px or greater
    else if ($top >= 1000 && $top < 1500) {
        // Do something else
    } else {
        // Go back to normal
    }
});
相关文章：