javascript - animate - jquery hide animation

¿Cómo ocultar una div cuando la barra de desplazamiento se mueve con jQuery?

Question

Solo quiero que el #menu desvanezca cuando la barra de desplazamiento se mueve para proporcionar una interfaz menos recargada. ¿Hay algún código que permita esto?

Creo que básicamente lo que estoy buscando es cómo agarrar el evento de movimiento de la barra de desplazamiento. Para desvanecer lentamente el #menu después de 1 segundo de desplazamiento y traer de vuelta el #menu después de 2 segundos de inactividad de la barra de desplazamiento.

Muchas gracias!

Answer 1

Creo que esto es lo que estás buscando http://jsfiddle.net/wfPB6/

Answer 2

Derecha usando lo siguiente:

$(''body'').scroll(function(){
$(''#menu'').fadeOut();
var scrollA = $(''body'').scrollTop();
setTimeout(function(){
if(scrollA == $(''body'').scrollTop()){
$(''#menu'').fadeIn();
}
}, 200);
})

Así que registramos la cantidad de desplazamiento, esperamos 200 milisegundos y luego vemos si el desplazamiento ha cambiado, si no, volvemos a fundir el menú.

Answer 3

var $menu = $("#menu");
var opacity = $menu.css("opacity");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != ''undefined'') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$menu.animate({ opacity: 1 }, "slow");
}, 2000);
};
$(window).scroll(function () {
if (!$menu.is(":animated") && opacity == 1) {
$menu.animate({ opacity: 0 }, "slow", fadeInCallback);
} else {
fadeInCallback.call(this);
}
});

http://jsfiddle.net/zsnfb/9/

Esto establece el evento de desplazamiento para hacer algunas cosas. Primero borra un tiempo de espera para volver a fundir el menú div. Después de eso, si el menú no está ya desvanecido, se desvanece el menú y establece el tiempo de espera en la devolución de llamada. Si el menú ya está desvanecido, simplemente establece el tiempo de espera. Si el usuario deja de desplazarse, el menú volverá a aparecer después de 2 segundos.

Hay otras soluciones que usan fadeOut () y fadeIn (). Mi único problema con esas funciones en este caso es esa display: none; configuración display: none; al menú div afectará el diseño de la página, donde se establece la visibility: hidden; u opacity: 0; no debería afectar el diseño.