jQuery - fadeOut de desplazamiento / fadeIn en “scrollstop”

Question

Tengo un trabajo de posicionamiento div, que es despedido por el desplazamiento de eventos. Lo que sucede es que el evento de desplazamiento es despedido un montón de veces que se traduce en un div parpadeo. Mi plan es a desaparecer que div y se desvanecen de nuevo en cuanto ningún caso de desplazamiento más se dispara. ¿Cómo puedo comprobar que el desplazamiento ha terminado? Pensé en una combinación de tiempo de espera <-> desplazamiento, pero en realidad nada funcionó como esperaba. Esto es lo que tengo hasta ahora.

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

});

Como se puede ver Salí de uno de mis últimos intentos de allí, pero las devoluciones de llamada de la función de fundido de entrada no funcionaba como era de esperar.

Answer 1

Por desgracia, no existe el concepto de desplazamiento parar por lo que realmente no se puede desencadenar una animación a partir de eso. Lo que puede funcionar mejor es animar vez la propiedad 'top' de la div de forma que se desliza suavemente a su nueva posición en lugar de parpadeo.

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

Answer 2

Puede usar jQuery eventos especiales para la creación de un evento scrollstop. James Padolsey ha escrito un gran del evento scrollstop .

Answer 3

Fix a no pulso de desplazamiento! 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 mientras yo estaba feliz ayer ... derrame cerebral Realidad volver hoy ... SAFARI reacciona con no volver a la prestación de todos los fragmentos necesarios detrás de la div en movimiento. Especialmente en el iframe de TinyMCE. Así que terminé con la siguiente y esto funciona bastante bien. Se desvanece el div -> animación a la posición -> Fundido de devolución de llamada sólo si se dispara ..

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

        });

    });

});