Question

有没有办法，使用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
    }
});

我尝试了这个，但它阻止了整个功能的运行。我在某个地方出错了吗？

Answer 1

看：如果Scroll是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*/ });

Answer 2

有几件事：

从最高编号开始重新排序您的条件，否则永远不会触发第二个条件。（如果滚动距离是1001px，那么它大于500，并将触发第一个条件，从而绕过第二个条件，因为它是else if）
缓存滚动值，这样您就不必在每次条件检查中重新评估它：

    $(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
        }
    });

Answer 3

$(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
    }
});

jQuery，如果窗口已滚动X像素执行此操作，否则如果已滚动XX像素执行其他操作

3 个答案: