slideUp и slideDown, проблема с задержкой (jQuery)

Question

Предполагается, что класс (heady) должен сдвигаться, когда высота процентного содержания документа ниже 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. Таким образом, вы добавляете/удаляете класс на элементе, который будет эффективно «перезагружать» прокрутку, позволяя анимации прокрутки запускаться каждый раз.

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