Encabezado deslizante para su sitio (tutorial Headroom.js)

Este artículo le mostrará cómo instalar cabezales. JS en su sitio web. Esta es una biblioteca JavaScript única que le permite tener un encabezado fijo que está oculto cuando un usuario ejecuta la página, pero muestra cuándo se ejecuta un usuario. Usted se beneficia de tener la navegación siempre presente en un sitio web, pero no ocupa la ventana de visualización cuando un usuario intenta leer contenido.

Se esconde en la implementación hacia abajo, se muestra al desplazamiento hacia arriba
De hecho, es lo mejor de ambos mundos en términos de sede, y este elemento le mostrará cómo integrarlo en su sitio web. Para este ejemplo, utilizamos Oxygen Builder y WordPress, pero siempre que tenga acceso a HTML y pueda instalar JavaScript, agregar clases y estilo a través de CSS, puede usar los métodos presentados en este tutorial y en su propio sitio. .
Realmente nos gustan los cabezas de cabecera en la agencia e instalamos cada uno de nuestros sitios web que tienen un encabezado fijo. Esto incluye todas nuestras versiones de comercio electrónico, muchos sitios web corporativos y más. El beneficio del uso aquí es enorme y no hay desventajas. La biblioteca del espacio para la cabeza no tiene adicciones, se crea en JavaScript Vanilla, es muy fácil de usar, incluso si no comprende cómo codificar, solo tiene unos pocos kilobytes y se puede instalar en unos minutos. Con esta introducción desde la carretera, hablemos sobre cómo instalar cabezal. JS en un sitio web Oxygen Builder.
Si está interesado en ver un video tutorial, es una presentación de 16 minutos sobre cómo usar cabezales. JS.
¿Te gusta este contenido? ¡Suscríbase a nuestro canal!
Suscribirse a isotrópico
El proceso aquí es muy simple. Primero, instalamos la biblioteca JavaScript, luego instalamos el CSS y finalmente lo inicializamos en el elemento de encabezado en el sitio web. Cómo funciona Headroom.js pero, antes de instalarlo, hablemos de cómo funciona realmente esta biblioteca. JavaScript identifica cuándo un usuario se ejecuta, se ejecuta y proximidad a la parte superior o inferior de la página. Luego aplique diferentes clases de CSS. Por ejemplo, cuando un usuario ejecuta la clase CSS. Cabeza, fijada se aplica dinámicamente. Cuando un usuario corre hasta la parte superior de la página, el espacio para la cabeza CSS. eliminado. Como sabemos eso. Con esta descripción fuera de la carretera, entremos en nuestro tutorial sobre cómo usar cabezales. JS para obtener un encabezado fijo que se esconde cuando se ejecuta en su sitio web. (Solo Oxygen Builder) Configure su encabezado Ignore esta sección si no usa Oxygen Builder para crear su sitio web. Si usa Oxygen Builder, no use el generador de encabezado con esta biblioteca. De hecho, recomendamos que nunca use el generador de encabezado y simplemente cree una sección, agregue la etiqueta del encabezado a través del panel de configuración principal y coloque el contenido dentro. Esto le da mucho más control sobre el aspecto.
La única razón por la cual el generador de encabezado es bueno es que agrega un efecto pegajoso, pero eso no tiene sentido si usamos la biblioteca de sala de cabeza.js. Para obtener más aclaraciones, ciertamente mira el video anterior que entra en detalle sobre este paso para Oxygen Builder y WordPress. Instale el espacio para la cabeza.js En el video tutorial, simplemente copio y pegué la versión reducida de JS de la cabeza a un scripts de entrada avanzados. Esto es puro JavaScript, por lo que todo lo que tenemos que hacer es agregar el fragmento JavaScript a WP_Footer.

También puede usar un CDN para entregar esto: https://unpkg.com/headroom.js

Inicialice Headroom.js En la misma entrada, inicializamos el script. Pero esto es que toma JavaScript y dice que tiene que aplicar las diferentes clases de CSS al elemento específico. En esta situación, simplemente seleccionamos cualquier elemento que tenga la etiqueta . // tomar un elemento lima myelment = document.querySlectector (“encabezado”); // Construye una instancia de espacio para la cabeza, pasando el elemento del espacio para la cabeza = nuevo espacio para la cabeza (mielement); // Inicialise Headroom.init (); Establecer las opciones para el espacio libre es un paso opcional, pero también puede especificar varias opciones para esta biblioteca. En nuestra situación, generalmente usamos solo la opción de compensación. Esto significa que el encabezado siempre permanecerá fijo (y visible) siempre que estemos a menos de 200 píxeles de la parte superior de la pantalla.

VAR OPTIONS = {// Offset vertical en PX antes del elemento istt no se despidió. Simplemente agregue esto donde quiera en el sitio. .headroom {Will-Change: Transform; -WebKit-Transition: -webkit-transform 200ms lineal; Transición: -Webkit -Transform 200ms Lineal; -O-transición: transformar 200 ms lineal; Transición: transformar 200 ms lineal; Transición: transformar 200 ms lineal, -webkit -transform 200ms lineal; } .eadroom-spinned {-webkit-transform: traducey (0%); -Ms-transform: traducey (0%); Transformación: traducido (0%); } .eadroom-unpinnend {-webkit-transform: traducey (-100%); -Ms-transform: traducey (-100%); Transformación: traducido (-100%); } También puede escribir CSS adicionales que aplican dinámicamente colores de fondo, cambie el tamaño de todo el encabezado cuando esté cerca de la parte superior de la página y use las clases CSS adicionales que esta biblioteca aplica al encabezado cuando se ejecuta o en diferentes posiciones. De la página . página. Puede usar scripts avanzados para agregar este CSS, organizador de scripts, CSS universal para el constructor de oxígeno o cualquier hoja de estilo que su sitio fuera compensada para el constructor de oxígeno, generalmente usamos una plantilla Capchall para crear un encabezado y un sótano. Entre el encabezado y el sótano hay un bloque de contenido interior. Compensamos este bloque de contenido interior con la altura del encabezado (puede usar el borde superior o el relleno), porque al colocar algo fijo se superpondrá los diferentes contenidos.
Al acoplarlo con la opción de desplazamiento de 200 píxeles mencionados anteriormente, todo el contenido es visible y alineado correctamente.Conclusión En este momento, ahora tiene un encabezado fijo que sale de la vista cuando un usuario ejecuta la página y reaparece cuando un usuario se ejecuta.Esto es excelente para la experiencia del usuario, el uso del sitio web y un efecto general interesante, que es muy fácil de agregar. Esperamos que este tutorial sobre la implementación de Headroom.js en su sitio web haya sido útil, si tiene alguna pregunta, No dude en comunicarse con la sección de comentarios a continuación.También recomendamos suscribirse a nuestro canal de YouTube y ver ese video tutorial para obtener más claridad sobre la adición de un encabezado pegajoso en Oxygen Builder.