JavaScript ocultar elemento div en la acción de desplazamiento

Estoy usando este fragmento de código para ocultar una barra de menú cuando los usuarios se desplazan por una página. Funciona bien en Chrome 17.0.963.78 pero sigue parpadeando en otros navegadores, a saber, IE firefox y safari.

$(window).load(function(){
    $(document).scroll(function(){  
        $('#inner_floating').fadeOut();

        var scrollA = $('body').scrollTop();

        setTimeout(function(){
            if(scrollA == $('body').scrollTop()){
                $('#inner_floating').fadeIn();
            }
        }, 100);
    })
});

preguntado el 09 de marzo de 12 a las 13:03

1 Respuestas

El problema es que su función .scroll se llama para cada píxel (o tic de la rueda del mouse) desplazado, por lo que las animaciones se ejecutan muchas veces consecutivas.

Intente algo como esto:

$(window).load(function(){
    $(document).scroll(function(){  
        if($("#inner_floating:hidden").length == 0) {
            $('#inner_floating').fadeOut();
        }

        var scrollA = $('body').scrollTop();

        setTimeout(function(){
            if(scrollA == $('body').scrollTop() && $("#inner_floating:hidden").length > 0){
                $('#inner_floating').fadeIn();
            }
        }, 100);
    })
});

De esta manera, la animación solo sucede si es necesario.

respondido 09 mar '12, 14:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.