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

Question

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?

• cloying: Well the first else if won't get hit since >=500 is also >= 1000, switch over the first two statements?
• user400654: In the case of over 1000, do you also want to do the over 500?
• Dean Elliott: @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.
• Vipin Kohli: Use the solution suggested by "Strukt". You need to change the order of your if checks, greater to lower value.

Answer 1

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

• 3pic: BTW dont bet on rate for events, scrolling, etc. Manage this like it would possible to jump from 10 to 580px immediatly.

Answer 2

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

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

• 3pic: It works, but it can be far simpler. Useless complexity provides bugs.