some image

Codes and Tags

Ocultar header de la pagina con scroll down

Etiquetas: Blog, Web No comments

Durante mucho tiempo siempre me llamo la atención esas páginas en las qué uno hacía Scroll Down al contenido y mágicamente desaparecía el Header o el Menú en la página… Así que este fin de semana me puse en la tarea en descubrir la forma de hacerlo y voila!.. acá describo mi experiencia.

1. Revisando el código.

La forma más sencilla, es utilizando algo de jQuery y haciendo una validación de la posición del Scroll, la cuál nos permitirá hacer aparecer o desparecer el Header. (Lo interesante de esto es que podemos sacar nuestra creatividad a flote para hacer muchas más cosas :) ).

Acá presentó el código de JavaScript y el ejemplo en vivo de como ocultar header de la pagina con scroll down.

 

var lastPositionScrollTop = 0;

/***
 * Appear and disappear the header depends the
 * position of the Scroll
 */
$(window).scroll(function () {
    var position = $(this).scrollTop();
    if (position < lastPositionScrollTop){
        $('.navbar ').fadeIn("slow");
    } else {
        $('.navbar ').fadeOut("slow");
    }
    lastPositionScrollTop = position;
});

 

2. Demo

Acá podrás visualizar el DEMO para ocultar header de la pagina con scroll down.

3. Código Fuente

 

Git Logo

Código en GitHub

About Edwin Torres

Related Posts

  • AngularJS Logo
  • AngularJS Logo
  • JavaScript 5
  • JavaScript 5

Add your comment