WordPress : Cambiar color de la cabecera al hacer scroll con Elementor

Sticky Header con Elementor sin Plugins

Configurar el contenedor de elementor 

→ Debemos Poner en el contenedor en la pestaña avanzado >

Disposicion : Clases CSS = La clase  header__main , sin el punto 

Efectos de Movimiento : Sticky  = Top

Agregar la clase header__Sticky al contenedor de elementor por medio de jQuery

→ Debemos poner el siguiente SCRIPT

Para insertar el script podemos  ponerlo en un elemento html , o tambien en nuestro JS

<SCRIPT type="text/javascript">
  
function headerStyle() {
	var varJQ1 = jQuery.noConflict();    

	if (varJQ1('.header__main').length) {		

	     var windowpos = Scroll(window).scrollTop();		
             var siteHeader = Scroll('.header__main');	

		if (windowpos > 50 ) {		
			
		     siteHeader.css('display','none') ;      
		     siteHeader.addClass('header__Sticky');			
		     siteHeader.css('display','flex') ;
          
		} else {
			
			siteHeader.removeClass('header__Sticky');
			
		}

	}
} // Fin funcion headerStyle

var np = jQuery.noConflict();
np(window).on('scroll', function () {	
	headerStyle();	
});

</SCRIPT>

$('.selector').length : es un metodo  jQuery , Se utiliza para contar el número de elementos coincidentes con el selector.

console.log(varJQ1('.header__main').length);  

Contenido de la clase css header__Sticky

Crear Sticky Header Effects con Elementor y con Plugins

Sticky Header Effects for Elementor  Por Rwattner 

https://es.wordpress.org/plugins/sticky-header-effects-for-elementor/

Sticky Header Effects para Elementor añade opciones a Elementor Pro para cambiar el estilo de la cabecera cuando el visitante empieza a desplazarse por la página. Elige la distancia de desplazamiento para cambiar la altura de la cabecera, el color de fondo y el borde inferior. Otras características personalizables son cabecera transparente, encoger el logo, cambiar el color del logo, desenfoque del fondo y ocultar la cabecera al desplazarse hacia abajo.

Este plugin es compatible con todos los navegadores y totalmente adaptable. Esto significa que funcionará en todos los navegadores, así como en tabletas y dispositivos móviles.

Este plugin está pensado para ser una extensión del maquetador de páginas Elementor Pro, ya que no es un plugin independiente.

Referencia :

✅Cambiar el color de la cabecera al hacer scroll en Wordpress con Elementor pro

https://www.youtube.com/watch?v=ZPFyb7mAMq8

Momento que se muestra el script

https://youtu.be/ZPFyb7mAMq8?si=q-p295XldhctUWyI&t=215

Web de apoyo

https://www.cubicfactory.com/jseditor/   ediotr online de codigo Javascript