jQuery - fadeOut su Scroll / fadeIn su “scrollstop”

Question

Ho un posizionamento div funzionante che viene attivato dall'evento scroll.Cosa succede che l'evento di scorrimento viene attivato un sacco di volte, il che si traduce in un div tremolante.Il mio piano è di far scomparire quel div e di ripristinarlo non appena non viene più attivato alcun evento di scorrimento.Come posso verificare che lo scorrimento sia terminato?Ho pensato a una combinazione di timeout <-> scroll ma in realtà nulla ha funzionato come speravo.Ecco cosa ho ottenuto finora.

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

});

Come puoi vedere, ho lasciato lì uno dei miei ultimi tentativi, ma i callback della funzione di dissolvenza non hanno funzionato come previsto.

Answer 1

Sfortunatamente non esiste il concetto di arresto dello scorrimento, quindi non puoi davvero attivare un'animazione da quello.Ciò che potrebbe funzionare meglio è invece animare la proprietà "top" del tuo div in modo che scivoli dolcemente nella sua nuova posizione invece di tremolare.

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

Answer 2

Puoi utilizzare eventi speciali jQuery per creare un evento scrollstop.James Padolsey ha scritto un grande esempio di evento scrollstop.

Answer 3

Risolto il problema per cui non pulsava durante lo scorrimento!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, anche se ieri ero felice...Oggi la realtà torna a galla...SAFARI reagisce non eseguendo nuovamente il rendering di tutti i frammenti necessari dietro il div in movimento.Soprattutto sull'iframe di tinyMCE.Quindi ho finito con quanto segue e funziona abbastanza bene.Dissolve il div -> animazione in posizione -> Dissolvenza in apertura solo se viene attivata la richiamata..

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

        });

    });

});