Ocultar el encabezado según la posición de la barra de desplazamiento

Con el furor del diseño responsive la necesidad de aprovechar al máximo los distintos tamaños de pantalla se convirtió en casi en una máxima a la planear un nuevo desarrollo. Para lograrlo existen decenas de técnicas, una de ellas es la de ocultar el encabezado del sitio según el usuario utiliza la barra de desplazamiento del navegador, para esta tarea Headroom.js es una muy buena solución.

Headroom.js es una pequeña biblioteca escrita con JavaScript que emplea las transiciones CSS provistas por animate.css para animar la forma de ocultar la barra de navegación.

Este proyecto funciona perfectamente sin ninguna dependencia, sin embargo esta pensado de tal manera que se puede combinar perfectamente su utilización junto a la del popular framework javascript jQuery, facilitando considerablemente su instalación.

La configuración también es otro aspecto a destacar por lo sencillo que resulta, en apenas unas lineas de código podemos definir cuando ocultar el encabezado o cuando mostrarlo, además de obviamente configurar el tipo de animación a utilizar.

Cuando hablamos de animaciones tenemos a nuestra disposición cuatro estilos distintos (slide, swing, flip y rebote).

Ejemplo de uso:

$("header").headroom({
  "tolerance": 5,
  "offset": 205,
  "classes": {
    "initial": "animated",
    "pinned": "bounceInDown",
    "unpinned": "bounceOutUp"
  }
});

// quitar
$("#header").headroom("destroy");

Por ultimo me gustaría comentar que este plugin es extremadamente liviano, 3.7kb en su versión desarrollador y 1.7kb en su versión simplificada y comprimida mediante gzip, peso más que apropiado si lo que buscamos es no retrasar la descarga de nuestro sitio.

Headroom.js es un proyecto que podemos descargar de forma gratuita y liberado bajo licencia MIT.