jQuery, если в окне прокручивается X пикселей, сделайте это, иначе если прокручивается XX пикселей, сделайте что-нибудь еще

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

Look: Если свиток 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

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

Answer 3

Пара вещей:

1. Reorder ваши условия, начиная с наибольшим числом, или иначе второе условие не будет срабатывать. (Если расстояние прокрутки составляет 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 
     } 
    });