javascript - jQuery, if window has scrolled X pixels do this, else if has scrolled XX pixels do something else - Stack Overflow

Is there a way, using jQuery, to do different things based on how far the window has been scrolled?

This is the code I use right now;

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

What I want to do though is something like this ;

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

I tried this, but it stopped the entire function from working. Am I going wrong somewhere?

Is there a way, using jQuery, to do different things based on how far the window has been scrolled?

This is the code I use right now;

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

What I want to do though is something like this ;

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

I tried this, but it stopped the entire function from working. Am I going wrong somewhere?

• javascript
• jquery

Share Improve this question Follow asked Aug 5, 2015 at 13:36 Dean ElliottDean Elliott 18911 gold badge55 silver badges1212 bronze badges 4

• 2 Well the first else if won't get hit since >=500 is also >= 1000, switch over the first two statements? – cloying Commented Aug 5, 2015 at 13:39
• In the case of over 1000, do you also want to do the over 500? – Kevin B Commented Aug 5, 2015 at 13:42
• @KevinB Basically at 500px I need an element to be given a fixed position. Then at 1000 I need it to switch to an absolute position. – Dean Elliott Commented Aug 5, 2015 at 13:49
• Use the solution suggested by "Strukt". You need to change the order of your if checks, greater to lower value. – Vipin Kohli Commented Aug 5, 2015 at 13:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Look : If Scroll is 1250px, it has been caught by >=500 !

Start testing with the highest value:1000px !

 $(document).scroll(function() {

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

EDIT1 It can be better to fix the scroll value you check, instead of calling it each if test a value that would have change . It's up to you, not absolutely needed:

$(document).scroll(function() {
           var value=$(document).scrollTop();/* <== here*/

            if ( value >= 1000 ) {
            } else if ( value >= 500 ) {
            } else {
            }
        });

EDIT2 Code beautiful ?

$(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 Code configurable ?

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*/
                });

A couple of things:

1. Reorder your conditions, starting with the highest number, or else the second condition will never be triggered. (If the scroll distance is 1001px, then it's greater than 500, and will trigger the first condition, thus bypassing the second because it's an else if)

2. Cache the scroll value so you don't have to re-evaluate it in each conditional check:

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