Как предотвратить дублирование событий при прокрутке в jQuery?

У меня есть 4 divs like;

<div>diva</div>
<div>divb</div>
<div>divc</div>
<div>divd</div>

Они имеют ширину и высоту 400 пикселей. Я хочу предупредить когда Div б свитки верхней части страницы, и даже с помощью a scroll функции и scrollTop метод. Каждый раз, когда прокручивается, он проверяет, если scrollTop() если lager более 400, и предупредить a. Но если я не нажму кнопку "ОК" окна предупреждения, если продолжить прокрутку, придут несколько предупреждений, и я должен закрыть их все.

Но мне просто нужно одно предупреждение, и даже если я продолжу прокрутку, я больше не хочу получать оповещения. Также, если scrollTop ниже 400 пикселей, я хочу предупредить b (здесь также, я не хочу повторений). Если я получил предупреждение a, и если я scrollTop в противоположном направлении, и если scrollTop станет ниже 400 пикселей, я хочу alert b, без проблем.

Вот скрипка.

3 ответа

добавьте этот скрипт в свой файл JS и попробуйте этот скрипт:

$(document).ready(function() { 
 $(window).scroll(function(){
 var xx = $(document).scrollTop();
 if(xx > jQuery(".divb").height()){
 alert("a");
 }else{
 alert("b");
 } 
 });
});


Вы публикуете оповещения о событии "прокрутки", которое происходит при каждом прокрутке. Если это просто отладочная досада, то вы можете использовать вместо этого console.log("a") - пример

Если вы хотите, чтобы фактическая функция запускалась один раз за каждый раз, когда вы ее достигали, вы можете сделать это:

var a = false;
$(window).scroll(function(){
 var xx = $(document).scrollTop(); 
 if(xx > 400){
 if (!a) {
 alert("a");
 a = true;
 }
 }else{
 if (a) {
 alert("b");
 a = false;
 }
 } 
});

скрипка для этого примера


Самый простой способ избежать путаницы - это сохранить состояние прокрутки.

Демо: http://jsfiddle.net/abhitalks/uwUvC/1/

var last = 0, // last scroll-top to determine scroll direction
 scrolledUp = false, // to cache state of scroll up
 scrolledDown = false; // to cache state of scroll down
$(window).scroll(function (event) {
 var current = $(this).scrollTop();
 if (current > last) { // if scrolled down
 if (current > 400 && !scrolledDown) { // check position and state
 alert("A");
 scrolledDown = true; // reset scroll down state
 }
 } else { // if scrolled up
 if (current < 400 && scrolledDown && !scrolledUp) {
 alert("B");
 scrolledUp = true; // reset scroll up state
 }
 }
 last = current; // keep current position to check direction
});

Таким образом, вы уверены, что когда вы прокручиваете вверх и когда вы прокручиваете вниз. Сохраняйте состояние прокрутки в соответствующих переменных и проверьте их.

Предупреждения срабатывают только один раз в каждом направлении.

licensed under cc by-sa 3.0 with attribution.