Создать пользовательскую функцию события прокрутки, а затем повернуть назад при прокрутке вверх?

Мне нужно вызвать событие, когда я прокручиваю определенное расстояние вниз по странице, а затем отменяю событие, когда я прокручиваю назад после исходного события прокрутки.

Вот что я сейчас пробовал. Это вызывает событие, когда я прокручиваю расстояние вниз. Мне нужно установить индикатор выполнения на 10, когда я прокручиваю назад.

$(window).scroll(function() {
    var scrollY = $(this).scrollTop();
    if (scrollY > 4200) $(this).trigger("first-guy");
    if (scrollY > 1600) $(this).trigger("second-guy");
    if (scrollY > 2200) $(this).trigger("third-guy");
    if (scrollY > 3000) $(this).trigger("fourth-guy");
})

//first guy
.on("first-guy", function() {
    $('progress').animate({
        value: 20
    }, 200);
 })

events scroll jquery parallax triggers
person EmptyPockets    schedule 23.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я бы просто добавил еще один случай, когда scrollY меньше точки срабатывания. Итак, что-то похожее на это:

$(window).scroll(function() {
    var scrollY = $(this).scrollTop();
    if (scrollY > 200) $(this).trigger("first-guy");
    if (scrollY < 200) $(this).trigger("before-first-guy"); // LESS THAN
})
//first guy
.on("first-guy", function() {
    $('progress').animate({
        value: 20
    }, 200);
 })
//before first guy
.on("before-first-guy", function() {
    $('progress').animate({
        value: 0
    }, 200);
 })

Вот jsfiddle.

В зависимости от того, что именно вы пытаетесь сделать, вы можете захотеть структурировать его по-другому или даже добавить переменные для проверки определенных значений / событий.

person pschueller    schedule 23.02.2014
comment
Спасибо. Это действительно работает. Единственная проблема в том, что он кажется немного медленным. Если у меня установлена ​​скорость .animate () меньше 25, она, похоже, отстает (более чем на 200 миллисекунд, на которые она установлена) и разрушает эффект, к которому я стремлюсь. Есть мысли, как его оптимизировать? - person EmptyPockets; 23.02.2014
comment
Попробуйте очистить очередь анимации с помощью _1 _... вот так: $('progress').stop(true,true).animate(...). Посмотрим, устранит ли это задержку. - person pschueller; 23.02.2014
comment
Потрясающие! Единственный .stop (). Animate () отлично работал и имел нужный мне эффект. Я никогда раньше не использовал остановку, поэтому мне придется изучить остановку (правда, правда), но, похоже, это останавливает анимацию вообще. Спасибо. - person EmptyPockets; 23.02.2014