jQuery - fadeOut on Scroll / fadeIn on “scrollstop

问题:

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.

回答1:

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);

回答2:

You can use jQuery special events for creating a scrollstop event. James Padolsey has written a great example of scrollstop event.

回答3:

Fix to not pulse on scroll! 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);
        });
    }
});

回答4:

Ok while i was happy yesterday... Reality stroke back today... SAFARI reacts with not re-rendering all necessary fragments behind the moving div. Especially over tinyMCE's iframe. So i ended up with the following and this works quite well. Fades out the div -> animation to position -> Fade in only if callback is fired..

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

        });

    });

});