En este tutorial, te mostraré cómo crear un efecto de encabezado (header) que se ocultará cuando los usuarios hagan scroll hacia abajo y se mostrará nuevamente cuando hagan scroll hacia arriba. Este efecto puede mejorar la experiencia de navegación en tu sitio web construido con Elementor. Para lograrlo, necesitarás algo de HTML, CSS y jQuery.
Agrega CSS:
Primero, asegúrate de añadir una class a tu sección llamada .fixed-header (header).
A continuación, agrega el siguiente código CSS para definir los estilos iniciales y de ocultar/mostrar:
/* Estilo inicial del header */
.fixed-header {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: transform 0.3s ease !important; /* Agregamos una transición suave */
z-index: 9999;
}
/* Estilo para ocultar el header */
.fixed-header.hidden {
transform: translateY(-100%); /* Ocultar el header fuera de la vista */
}
Agrega JavaScript:
Ahora, necesitas incluir el siguiente código JavaScript (puedes añadirlo dentro de un widget HTML )para activar el efecto de ocultar/mostrar el encabezado y el footer al hacer scroll:
<script>
jQuery(document).ready(function($) {
var lastScrollTop = 0;
var header = $(".fixed-header");
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
// Desplazamiento hacia abajo
header.addClass("hidden");
} else {
// Desplazamiento hacia arriba
header.removeClass("hidden");
}
lastScrollTop = st;
});
});
</script>
¡Eso es todo! Ahora, cuando los usuarios hagan scroll en tu sitio web construido con Elementor, el encabezado se ocultará mientras hacen scroll hacia abajo y se mostrará nuevamente cuando hagan scroll hacia arriba. El footer también seguirá un efecto similar. Asegúrate de ajustar los valores de posición y transición en el CSS según tus preferencias y necesidades de diseño.