Cómo hacer un menú sticky que cambia de color al hacer scroll en Elementor

¿Quieres que tu menú principal en Elementor destaque y cambie de color al hacer scroll? 🚀 Esto no solo mejora la experiencia de usuario, sino que también le da un toque profesional a tu sitio. En este tutorial aprenderás a crear un menú sticky que cambia su color de fondo y texto al hacer scroll usando un sencillo código JavaScript y CSS. ¡Vamos a hacerlo!

Paso 1: Agrega el código JavaScript para detectar el scroll

Empezamos con un script que se debe insertar en Elementor al final del body o en la sección de scripts personalizados. Este código detecta cuando el usuario hace scroll y agrega o remueve una clase al header.

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('._header_'); // Selecciona el header por su clase

    if (!header) return; // Si no existe, sale del script

    window.addEventListener('scroll', function () {
      if (window.scrollY > 0) {
        header.classList.add('_sticky_active_'); // Al hacer scroll, activa la clase sticky
      } else {
        header.classList.remove('_sticky_active_'); // Cuando está arriba, remueve la clase
      }
    });
  });
</script>

Explicación del código:

• document.querySelector('._header_'): selecciona el elemento que tiene la clase _header_. Este es tu menú o header principal.
• window.scrollY > 0: detecta si se hizo scroll hacia abajo.
• Se agrega o remueve la clase _sticky_active_ para controlar estilos de sticky y colores.

Paso 2: Crea el CSS para el menú sticky con cambio de colores

Ahora definimos el estilo para el menú por defecto, y qué cambiarán cuando tenga la clase _sticky_active_.

/*Header Sticky*/

._m_color_{
	display:none; /* Elementos con esta clase están ocultos inicialmente */
}

._sticky_active_ ._m_color_{
	display:block; /* Se muestran al hacer scroll */
}

._sticky_active_ ._m_white_{
	display:none; /* Se ocultan cuando el menú es sticky */
}

._sticky_active_ {
	background:#fff !important; /* Fondo blanco al hacer scroll */
}

._sticky_active_ .elementor-nav-menu--main .elementor-item{
	color:#333333 !important; /* Cambia el color de los textos del menú */
}

Explicación del CSS:

• Se usan clases internas (_m_color_ y _m_white_) para manejar diferentes colores o estados visibles en el menú. Puedes colocar textos, iconos o logos en estas clases para que aparezcan o desaparezcan según el scroll.
• .elementor-nav-menu--main .elementor-item apunta a las opciones del menú para cambiar el color de texto.
• background:#fff !important; asegura que el fondo sea blanco cuando está sticky.

Paso 3: Cómo integrar el código en Elementor

1. En tu panel de WordPress, ve a Elementor y edita la página o plantilla donde quieras el menú sticky.
2. En el editor Elementor, ve a Configuración de la página o Configuración avanzada y busca la opción para añadir código en body/end.
3. Pega el código JavaScript proporcionado al final del body.
4. Agrega el CSS al Personalizador de WordPress en «Apariencia > Personalizar > CSS adicional» o dentro de Elementor en «Configuración del sitio > Personalizar CSS».
5. Asegúrate de que el menú o header tenga la clase _header_ en su configuración de clases CSS para que el script lo detecte.

Personalización y mejoras opcionales:

• ✅ Cambia los colores de fondo y texto en el CSS para que coincidan con tu branding.
• ✅ Usa animaciones CSS para que la transición del color sea más suave con transition: background 0.3s, color 0.3s; dentro de ._sticky_active_.
• ✅ Añade o cambia los elementos dentro de _m_color_ y _m_white_ para alternar logos o íconos.

Conclusión:

¡Y listo! Ahora tienes un menú sticky que cambia su color al hacer scroll, dándole más vida y profesionalismo a tu sitio con Elementor. ⚡ Es un cambio pequeño pero de gran impacto en la experiencia visual. Anímate a probar y personalizar los colores y efectos para que tu menú sea único. 🙌✅