Crear un Efecto de Ocultar/Mostrar Header al Hacer Scroll en Elementor

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.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad