slideUp и slideDown, задержка выпуска (jQuery)

Question

Предполагается, что класс (заголовок) будет сдвигаться вверх, когда процентная высота документа ниже 25%, а затем при прокрутке вверх он появится с задержкой 1400 мс. Проблема в том, что это должно произойти снова, класс не будет снова выдвигаться.

$(document).ready(function(){

    var lastScrollTop   = 0,
        delta           = 5;

$( window ).scroll(function(event) {

    var scrollTop        = $( this ).scrollTop(),
        scrollAmount     = $( window ).scrollTop(),
        documentHeight   = $( document ).height(),
        scrollPercent    = ( scrollAmount / documentHeight ) * 100;



    if ( Math.abs( lastScrollTop - scrollTop ) <= delta )
        return;

    // scroller
    if ( scrollTop > lastScrollTop && scrollPercent > 25 )
    {
        $( '.heady' ).slideUp(600);                             // scroll down code
    }
    else if ( scrollTop < lastScrollTop)
    {
        $( '.heady' ).delay(1300)                               // scroll up code
                     .slideDown(600);
    };

    lastScrollTop = scrollTop;

    });
});

Answer 1

Попробуйте вместо этого сделать анимацию вверх / вниз, используя CSS translateY. Таким образом, вы добавляете / удаляете класс в элементе heady, который эффективно "сбрасывает" прокрутку, позволяя анимации прокрутки срабатывать каждый раз.

Так я справляюсь с большинством своих анимаций, если только по какой-то причине я не использую их в JS.