jQuery的 - 淡出上滚动/淡入的“scrollstop”

Question

我有得到由涡旋事件烧成一个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);

Answer 2

您可以使用jQuery特殊事件创建scrollstop事件。詹姆斯Padolsey写了一个很大的例子。

Answer 3

，固定为不能在滚动脉冲！的setTimeout

var animActive = false;
$(window).scroll(function(){
    if (animActive == false){
        animActive = true;
        $('#target').fadeOut(100, function () {
            var scrl = setTimeout( function(){
            animActive = false;
            $('#target').fadeIn(500);
            }, 2000);
        });
    }
});

Answer 4

好而今天，我很高兴昨天......现实中风回来...... SAFARI有没有重新呈现所有必要的片段移动DIV背后反应。尤其是在TinyMCE的的iframe。 所以，我结束了以下这工作得很好。淡出在div - >动画位置 - >仅限于淡入如果回调烧制..

$(document).ready(function(){

    $(window).scroll(function() {

        topParentx = $('#tinyMCEwrapper').position().top;

        var topTarget = "0px";

        if ($(this).scrollTop() >= topParentx){
            topTarget = ($(this).scrollTop()-topParentx) + "px";
            $('.mceExternalToolbar').animate({opacity: 0}, 1);
        }
        $('.mceExternalToolbar').stop().animate({top: topTarget}, 200, 'swing', function(){
            $('.mceExternalToolbar').animate({opacity: 1}, 100, 'swing');

        });

    });

});