slideUp和slideDown，延迟问题（jQuery）

Question

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

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