jQuery - 滚动时淡出/淡入于 "scrollstop"

Question

我有一个 div 定位工作，它由滚动事件触发。如果滚动事件被多次触发，导致 div 闪烁，会发生什么情况？我的计划是淡出该 div 并在不再触发滚动事件后立即淡入。如何检查滚动是否结束？我考虑过超时 <-> 滚动的组合，但实际上没有任何效果如我所愿。这是我到目前为止所得到的。

$(document).ready(function(){

    //var animActive = false;

    $(window).scroll(function() {

        /*
        if (animActive == false){
            animActive = true;
            $('.mceExternalToolbar').fadeOut(100, function () {
                $('.mceExternalToolbar').fadeIn(3000, function () {
                    animActive = false;
                    console.log("NOW");
                });
            });
        }
        */

        topParentx = $('#tinyMCEwrapper').position().top;
        if ($(this).scrollTop() >= topParentx){
            $('.mceExternalToolbar').css('top', ($(this).scrollTop()-topParentx) + "px");
        } else {
            $('.mceExternalToolbar').css('top', "0px");
        };
    });

});

如您所见，我将最后一次尝试留在那里，但淡入淡出函数的回调并未按预期工作。

Answer 1

不幸的是，没有滚动停止的概念，所以你不能真正从中触发动画。更好的方法可能是为 div 的“top”属性设置动画，以便它平滑地滑动到新位置而不是闪烁。

        topParentx = $('#tinyMCEwrapper').position().top;
        var topTarget = "0px";
        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
        }
        $('.mceExternalToolbar').stop().animate({top, topTarget}, 500);