jQuery-在Scroll上淡出/在"scrollstop"上淡入 [英] jQuery - fadeOut on Scroll / fadeIn on "scrollstop"

问题描述

我有一个div定位工作，它被滚动事件触发.发生滚动事件触发多次导致div闪烁的情况.我的计划是淡出该div，并在不再触发滚动事件时立即淡入.如何检查滚动是否结束?我考虑了超时<->滚动的组合，但是实际上没有任何工作如我所希望的那样.这就是我到目前为止所得到的.

I have a div positioning working which gets fired by the scroll-event. What happens it that the scroll event gets fired a bunch of times which results in a flickering div. My plan is to fade out that div and fade back in as soon as no more scroll event is fired. How can I check that scrolling is over? I thought about a combination of timeout <-> scroll but actually nothing worked as I hoped. Here's what i got so far.

$(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");
        };
    });

});

如您所见，我在其中留下了最后一次尝试，但是淡入淡出功能的回调没有按预期工作.

As you can see I left one of my last attempts in there, but the callbacks of the fade-function didn't work as expected.

推荐答案

不幸的是，没有滚动停止的概念，因此您不能真正从中触发动画.可能更好的方法是为div的"top"属性设置动画，以使其平滑滑动到新位置而不是闪烁.

Unfortunately there is no concept of scroll-stop so you can't really trigger an animation from that. What may work better is to instead animate the 'top' property of your div so that it smoothly slides to it's new position instead of flickering.

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

这篇关于jQuery-在Scroll上淡出/在"scrollstop"上淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！