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

Los encabezados que se ocultan automáticamente han sido constantemente populares en el diseño web por bastante tiempo. Muchos blogs y revistas en línea usan el encabezado fijo para mantener a los usuarios conectados y darles acceso directo a la navegación .

Medium ha redefinido esta característica con un concepto básico que oculta la navegación mientras se desplaza hacia abajo, pero la muestra mientras se desplaza hacia arriba . Este concepto se ha convertido en una tendencia tremendamente popular y ahora puedes replicarlo fácilmente usando Headroom.js .

Headroom.js es una biblioteca de JavaScript libre de vainilla sin dependencias ni funciones de API excesivas. Simplemente agrégalo a tu HTML, selecciona el encabezado de la página y déjalo funcionar.

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

Puede hacer esta funcionalidad usted mismo, pero ¿para qué molestarse? El espacio libre se prueba y es compatible con todos los principales navegadores . Incluso funciona bien con jQuery o Zepto si ya tienes una biblioteca JS instalada en tu sitio.

Encontrará muchos ejemplos de código en el repositorio de GitHub, pero aquí hay un ejemplo simple que se dirige al elemento #header :

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

La función init() tiene muchas opciones para personalizar . Puede personalizar las diferentes clases de elementos, junto con diferentes devoluciones de llamada de eventos, donde puede incrustar sus propias funciones . Por ejemplo, si desea que el elemento se desvanezca después de que se haya onUnpin, utilizará la onUnpin llamada onUnpin .

Todas estas opciones se enumeran en la página principal del complemento, así que compruébalo y mira lo que piensas. Si desea ver Headroom en acción, eche un vistazo al siguiente bolígrafo que contiene una clonación completa de la página de demostración principal .