Estoy usando jQuery mobile.

¿Cómo puedo hacer desaparecer el pie de página mientras el desplazamiento está activo?

Cuando se detiene el desplazamiento, quiero volver a mostrar el pie de página.

El fragmento de HTML se ve así:

<div id="footer" data-role="footer" data-position="fixed" data-corners="false">
0
user1765862 3 sep. 2014 a las 13:14

3 respuestas

La mejor respuesta

Ver página de prueba

var pageIsScrolling = (function(){
   var timer, body = $(document.body);
   return function(){
       clearTimeout(timer);
       timer = setTimeout(scrollEnd, 250);
       body .addClass('scrolling');
   }

   function scrollEnd(){
       timer = null;
       body.removeClass('scrolling');
   }
})();

$(window).on('scroll.scrolling', pageIsScrolling);

Ahora, cada vez que comience a desplazarse, el cuerpo tiene la clase scrolling y puede orientarlo en su CSS , así:

.scrolling > footer{ opacity:0; }

O incluso agregue transición para su pie de página para que se vea más suave.
(Estoy bastante seguro de que esto también debería funcionar con jQuery mobile)


Notas:

  • Podría trabajar directamente en el elemento footer de javascript, pero creo que trabajar con clases de estado generales es una mejor manera de cambiar los estados en una aplicación, y luego puede derivar de eso lo que quiera en su CSS, así que, aquí, la clase de estado deseada era "desplazamiento".
  • Estoy usando un espacio de nombres de eventos personalizado aquí, lo cual es una buena práctica
  • usando el almacenamiento en caché de elementos (cuerpo)
  • La función scrollEnd está separada y no está escrita directamente dentro de setTimeout para una mejor legibilidad.
0
vsync 3 sep. 2014 a las 10:54

Utilice el evento de desplazamiento jquery.

Puede encontrar información en los documentos: http://api.jquery.com/scroll/

Algo en la línea de (¡no probado!):

$(window).scroll(function() {
  $("#footer").hide();
});
1
Stromgren 3 sep. 2014 a las 09:17

Use $.scroll para ocultar el pie de página mientras se desplaza y setTimeout para mostrarlo nuevamente una vez que se detiene el desplazamiento:

var scrolling;
$(window).scroll(function() {
    clearTimeout(scrolling);//clear any existing timeout
    $("#footer").hide();
    scrolling = setTimeout(function(){$("#footer").show();},100);//set the timeout to hide the footer (will be cancelled if scrolling continues)
})

http://jsfiddle.net/c6uqdhjo/1/

2
Moob 3 sep. 2014 a las 09:57