Tengo un sitio web de WordPress en ejecución. Estoy tratando de diseñar algo único. Quiero cambiar el color en mi página cuando los usuarios se desplazan por la página. Pude hacerlo con éxito con este código.

codigo js

 <script type="text/javascript"> jQuery(document).ready(function( jQuery ) { jQuery(window).on('scroll touchmove', function() { if (jQuery(document).scrollTop() >= jQuery('#one').position().top) { jQuery('body').css('background', jQuery('#one').attr('data-color')); } if (jQuery(document).scrollTop() > jQuery('#two').position().top) { jQuery('body').css('background', jQuery('#two').attr('data-color')); } }); })(jQuery); </script>

Aquí tengo cinco secciones y le di IDS a las cinco secciones y el código funciona bien.

Cuando la página carga primero Este es el CSS que usé

 body { background:#333333; transition: all 1200ms ease-out; will-change: background; }

Atributos de color CSS para mis dos secciones.

data-color|#000000, data-color|#231E81 (agregué un código por sección a través de elementor)

Todo funciona bien. Sin embargo, quiero mostrar una imagen de fondo en toda la página y cuando los usuarios se desplazan, también quiero mostrar esa imagen. El color cambia cuando se desplaza, pero la imagen también debería mostrarse en el fondo. En este momento, cuando hay una imagen de fondo, solo muestra que el color de la imagen no cambia.

Para simplificar esta pregunta, agregué un video para mostrar exactamente cómo quiero. https://ufile.io/m2puc40i