jQuery - fadeOut auf Scroll / fadeIn auf „scrollstop“

Question

Ich habe eine div Positionierung Arbeits, die durch das Scroll-Ereignis wird ausgelöst. Was passiert es, dass das Scroll-Ereignis ein paar Mal, die in einem flackernden div führt gefeuert wird. Mein Plan ist, dass div zu verblassen und verblassen wieder in, sobald nicht mehr Scroll-Ereignis ausgelöst wird. Wie kann ich überprüfen, ob Scrollen vorbei ist? Ich dachte über eine Kombination von timeout <-> scroll aber eigentlich nichts funktionierte, wie ich gehofft hatte. Hier ist, was ich habe so weit.

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

});

Wie Sie kann ich dort links eine meiner letzten Versuche sehen, aber die Rückrufe der Fade-Funktion funktionierte nicht wie erwartet.

Answer 1

Leider gibt es kein Konzept von Scroll-stop, so dass Sie nicht wirklich eine Animation aus, dass auslösen können. Was kann besser funktionieren soll, anstatt das ‚top‘ Eigentum Ihrer div animiert, so dass es glatt gleitet, um es statt Flackern neue Position ist.

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

Answer 2

Sie können jQuery besondere Ereignisse verwenden, um eine scrollstop Veranstaltung. James Padolsey hat eine große Beispiel scrollstop Ereignis rel="nofollow.

Answer 3

Fix nicht auf Scroll-Impuls! 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

Ok, während ich glücklich gestern ... war heute Reality Schlaganfall zurück ... SAFARI reagiert mit nicht wieder machen alle notwendigen Fragmente hinter dem sich bewegenden div. Vor allem über tinyMCE der iframe. So landete ich mit dem folgenden und das funktioniert ganz gut. Blendet die div -> Animation Position -> Fade in nur wenn Callback ausgelöst wird ..

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

        });

    });

});