Crear un encabezado pegajoso de ocultación automática con Headroom.js

Encabezados auto-ocultos han sido muy populares en el diseño web durante bastante tiempo. Muchos blogs y revistas en línea utilizan el encabezado adhesivo para mantener a los usuarios comprometidos y Darles acceso directo a la navegación..

Medio tiene redefinido esta característica con un concepto básico que oculta la navegación mientras desplazando hacia abajo pero lo muestra mientras desplazándose hacia arriba. Este concepto se ha convertido en un tendencia muy popular y ahora puedes fácilmente replicarlo utilizando Headroom.js.

Headroom.js es un biblioteca de JavaScript de vainilla gratis Sin dependencias ni funciones API excesivas. Simplemente lo agrega a su HTML, apunta al encabezado de la página y lo deja correr.

Headroom simplemente Agrega y elimina ciertas clases de CSS que animan. a fin de que mostrar / ocultar el encabezado usando JavaScript para detectar el movimiento.

Usted podría hacer esta funcionalidad, pero ¿para qué molestarse? El espacio libre es probado y soporta todos los principales navegadores. Incluso juega bien con jQuery o Zepto Si ya tiene una biblioteca JS instalada en su sitio.

Encontrarás muchas muestras de código en el repositorio de GitHub pero aquí hay una ejemplo simple que se dirige a la #encabezamiento elemento:

 var myElement = document.querySelector ("# header"); // crea un objeto Headroom que pasa en el elemento #header var headroom = new Headroom (myElement); // inicializar la biblioteca headroom.init (); 

los en eso() la función tiene Un montón de opciones para personalizar. Puedes personalizar los diferentes clases de elementos, junto con diferentes evento de devolución de llamadas Donde puedes incrusta tus propias funciones. Por ejemplo, si desea que el elemento se desvanezca después de que no esté fijado, usaría el onUnpin llamar de vuelta.

Estas opciones son todas listado en la página principal del plugin, Así que échale un vistazo y mira lo que piensas. Si quieres ver Espacio para la cabeza en acción echar un vistazo a la pluma a continuación que contiene una Clon completo de la página principal de demostración..