slideUp和slideDown，延迟问题（jQuery）

Question

当文档百分比高度低于25％时，类（heady）应该是slideUp，然后如果向上滚动它将会出现1400ms的延迟。问题是这应该再次发生，类不会再次滑动。

$(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。