Últimamente se está poniendo de moda que la barra superior de un menú “sticky” desaparezca cuando avanzas
hacia abajo en la página que estás leyendo, ya sea deslizando el dedo sobre la pantalla de tu dispositivo móvil o con la rueda del ratón. Lo usan mucho los blogs para así permitir más espacio, especialmente en pantallas pequeñas. Hoy te explicamos cómo aplicarlo a tu sitio web con unos sencillos pasos usando unos sencillos trucos cuyo código nos facilita Nick Williams. Puedes ver toda la explicación en http://wicky.nillia.ms/headroom.js/.
El “Sticky Header”
En primer lugar vamos a comentar un poco el tema de la barra de menú que se queda fija en la parte superior de la página web, en inglés “sticky header” (cabecera pegadiza o fija). A mí me gustan mucho porque le das al usuario un acceso rápido al menú de tu web mejorando así la navegabilidad y usabilidad de tu web. Me gusta además navegar en páginas que lo tienen porque puedes acceder al menú sin necesidad de subir hasta el principio de la página.
Otra alternativa al menú fijo es el icono del menú (o hamburguesa) fijo, tal y como hicimos con http://webbix.co/
¿Porqué hacer desaparecer la barra del menú?
La mayoría de la gente navega con pantallas panorámicas, con un portátil o con una pequeña pantalla de un dispositivo móvil. En las pantallas grandes quizás no sea importante ocultar el menú superior pero hay casos en los que no queremos que nada interfiera con el contenido (imágenes grandes, texto que requiere concentracion …. ). Especialmente en dispositivos móviles me parece muy interesante porque la barra superior puede interferir con el contenido.
Veamos cómo podemos aplicar esta funcionalidad a nuestro sitio web.
Ocultar la barra en una web aplicando html
Lo primero es tener el header o el elemento html en el que se encuentra el menú fijo. Para ello establecemos el posicionamiento fijo con position:fixed. Este sería el código que hemos usado para nuestra web:
#branding {padding: 15px 0 0;z-index: 999;position: fixed;width: 100%;}
El ancho también lo hemos establecido en 100% y z-index alto por si hay algún otro elemento que se pueda superponer.
Luego simplemente aplicar ej javascript de headroom, que podeis descargar aquí, que basicamente lo que hace es cambiar el estilo del elemento html en el que está el menú para que aparezca, se desvanezca y también la manera en la que lo hace.
Se usan los siguientes tres elementos de estilo:
<!-- estado normal -->
<header class="headroom">
<!-- al avanzar - desaparece -->
<header class="headroom headroom--unpinned">
<!-- al subir - aparece -->
<header class="headroom headroom--pinned">Dentro del archivo headroom.js podemos modificar algunas variables que influencian la manera en que el menú se oculta o el espacio que necesitará para ocultarse al avanzar por la pantalla o darle a la rueda del ratón.
Las variables principales son las siguientes:
{
// el offset (en px) indica cuándo se ocultará el menú. Nosotros lo hemos puesto en 500px)
offset : 500,
// la tolerancia del ratón: cuántos px de rueda para que el menú aparezca de nuevo.
tolerance : 0,
// puedes establecer tolerancias para cada tipo de movimiento (subida - bajada)
tolerance : {
up : 5,
down : 0
},Finalmente necesitamos CSS para que se apliquen los cambios en el elemento html. Es importante que hayas nombrado el id html de tu menú en el archivo .js:
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}Como plugin de WordPress
Hay un plugin de WordPress realizado por Online Boswatchers que puedes encontrar aquí o buscando en el directorio de plugins bajo headroom.
Espero que hayas encontrado interesante la información y que te sea útil.
