Cómo crear con Elementor un efecto de ocultar/mostrar cabecera al hacer scroll

En el extenso mundo del diseño de páginas web, la maquetación de la cabecera principal de una página web (header) es uno de los puntos más a tener en cuenta a la hora de brindar una buena experiencia a los usuarios.

Por norma general, la cabecera (header) de una web WordPress se queda «pegada» arriba del todo cuando hacemos scroll por la página.

Esto es un poco coñazo, porque si queremos volver a acceder al menú de la web, tendremos que volver a subir arriba del todo, y si las páginas tienen mucho contenido, esto puede ser un suplicio, sobre todo en versión móvil.

Este comportamiento, hasta hace tiempo, era lo normal y establecido, pero ahora hay una forma de crear cabeceras de páginas web más funcionales.

Temas como Astra, GeneratePress o OceanWP, ya traen de forma nativa una opción para hacer que la cabecera (header) nos «acompañe» al hacer scroll por la página, algo que aporta una mejor experiencia.

A este efecto, se le denomina efecto sticky o pegajoso.

Si utilizas un tema para WordPress que no trae esta opción, como por ejemplo el tema Hello de Elementor (que básicamente no trae nada), tienes la opción de diseñar la cabecera de tu web con el propio Elementor.

El problema es que, con Elementor podrás crear una cabecera con efecto sticky (aquí te enseñan cómo). Peeeeeero, no te permite mostrarla y ocultarla al hacer scroll…, y ese es el tema del asunto.

Pero existe una solución rápida y sencilla de crear un sticky header con efecto mostrar/ocultar con Elementor, que es lo que te voy a mostrar 🙂

¡Al turrón!

Qué es una cabecera sticky o pegajosa

Antes de nada, ¿qué demonios es una cabecera pegajosa o sticky header?

Sticky Blinders, Edu?

Seamos serios.

Una cabecera sticky o pegajosa es aquella que se mueve verticalmente al hacer scroll por la web.

Si nosotros bajamos, la cabecera baja. Si nosotros subimos, la cabecera sube.

Hasta aquí bien, ¿no?

Problema de las cabeceras sticky

El mayor problema de tener una cabecera sticky en nuestra web es que cuando nos movamos hacia arriba o hacia abajo, va a estar siempre presente. O sea, que va a estar ahí, en la parte superior de la pantalla, ocupando parte del espacio disponible.

Esto, en versión escritorio, e incluso en tablet, puede no ser un problema importante.

Pero en móvil sí…, pues en móvil, el espacio que tenemos en la pantalla tiene ciertas limitaciones, y que la cabecera esté siempre ocupando un espacio fijo, provoca que siempre tendremos parte del contenido tapado.

Fucking coñazo!!!

Solución al problema de la cabecera sticky que se muestra siempre

Para evitar el problema que te acabo de contar, existe una solución (como para casi todo en esta vida; excepto para la muerte).

La solución pasa por hacer que la cabecera (header) se oculte fuera de la pantalla cuando descendamos, y se vuelva a mostrar cuando ascendamos.

¡Tremenda solución, por los clavos de Cristo!

De esta forma, la cabecera no estará ocupando un espacio en la pantalla innecesariamente si no necesitamos acceder a ella.

¿Queda o no queda claro?

¡Claro que queda claro!

Cómo crear con Elementor un efecto de ocultar/mostrar la cabecera (header) al hacer scroll

Lo que te voy a contar es muy rápido y sencillo de implementar, aunque no tengas ni idea de código ni nada parecido (de hecho yo no sé código y he podido hacerlo sin problemas, con eso te lo digo todo).

Voy a enseñarte cómo crear un efecto de cabecera (header) que se ocultará cuando los usuarios hagan scroll hacia abajo y se volverá a mostrar cuando hagan scroll hacia arriba.

Este es el efecto que vamos a conseguir:

¡Vamos a ello, oye!

Diseño de la cabecera en Elementor

A ver, no voy a dedicar ni dos líneas a este punto, porque quiero suponer que sabes cómo crear una plantilla de tipo Header en Elementor y maquetarla.

Pero por si acaso, lo digo, no vaya a ser el demonio…

El diseño puede ser algo sencillo, así:

Añadir estilo CSS para crear el estado por defecto

Una vez tienes la cabecera creada en una sección o contenedor de Elementor, tienes que asignarle una clase CSS personalizada desde la pestaña el widget Avanzado > Disposición > Clases CSS, a la que vamos a llamar «.cabecera-fija» (añádela sin el punto):

Y a continuación, vamos a añadir el siguiente código CSS en la pestaña Avanzado > Código personalizado, para definir el estado por defecto de la sección o contenedor:

				
					/*Estilo general cabecera*/
.cabecera-fija {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   transition: transform 0.3s ease !important;
   z-index: 9999;
}
/*Estilo ocultar cabecera*/
.cabecera-fija .hidden {
   transform: translateY(-100%); /* Ocultar cabecera fuera de pantalla */
}
				
			

Añadir código JavaScript para crear el efecto mostrar/ocultar

El segundo paso (y definitivo) va a insertar un código JavaScript dentro de un widget HTML.

Primero debes añadir un widget HMTL de Elementor en la mesa de trabajo:

Y, dentro de él, pegar el código que ves a continución. De esta forma, conseguiremos realizar el efecto de ocultar/mostrar la cabecera al hacer scroll:

				
					<script>window.addEventListener('DOMContentLoaded', function() {
jQuery(document).ready(function($) {
  var lastScrollTop = 0;
  var header = $(".cabecera-fija");

  $(window).scroll(function() {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      // Desplazamiento abajo
      header.addClass("hidden");
    } else {
      // Desplazamiento arriba
      header.removeClass("hidden");
    }
    lastScrollTop = st;
  });
});
});</script>
				
			

¡Y esto todo, amigos!

Ahora, cuando los usuarios hagan scroll en tu web, la cabecera (header) se ocultará al ir hacia abajo y se volverá a mostrar cuando hagan scroll hacia arriba.

¿Qué te ha parecido?

¡Mola, ¿no?!

Pues si te ha gustado, puedes dejarme un comentario a modo agradecimiento o si no te funciona correctamente, dímelo y lo hablamos…

Abrazoooooooosssssss!!!!!