Estoy tratando de cambiar la imagen de fondo cuando el usuario se desplaza por la página. El código que he escrito no funciona. Estoy ejecutando este código en un sitio web de WordPress. A continuación está mi código.

 <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-src')); } if (jQuery(document).scrollTop() > jQuery('#two').position().top) { jQuery('body').css('background', jQuery('#two').attr('data-src')); } if (jQuery(document).scrollTop() > jQuery('#three').position().top) { jQuery('body').css('background', jQuery('#three').attr('data-src')); } if (jQuery(document).scrollTop() > jQuery('#four').position().top) { jQuery('body').css('background', jQuery('#four').attr('data-src')); } if (jQuery(document).scrollTop() > jQuery('#five').position().top) { jQuery('body').css('background', jQuery('#five').attr('data-src')); } }); })(jQuery); </script>

Aquí tengo cinco secciones y le di una identificación a mi sección como defino en el código. A continuación se muestra cómo agregué el atributo 'data-src' a la sección en particular a través de la opción de atributo elementor data.

data-src|http://www.kasundev.xyz/design/wp-content/uploads/2022/02/WhatsApp-Image-2022-02-10-at-11.00.38.jpeg

Este es el CSS que estoy usando cuando la página se carga primero. Este código se aplica a toda la página.

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

Mi pregunta es que nada cambia cuando me desplazo. En lugar de una imagen, si doy un color como este, data-color|#000000 cambiará.

Cómo cambio mi imagen de fondo cuando me desplazo. ¿Puede alguien ayudarme?

Gracias