页面背景图像在滚动时不会改变

Question

我试图在用户滚动页面时更改背景图像。我写的代码不起作用。我在 WordPress 网站上运行此代码。下面是我的代码。

 <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>

这里我有五个部分，并按照我在代码中的定义为我的部分提供了一个 ID。下面是我如何通过 elementor 数据属性选项将“data-src”属性添加到特定部分。

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

这是我在页面首次加载时使用的 CSS。此代码适用于整个页面。

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

我的问题是滚动时没有任何变化。而不是图像如果我给出这样的颜色 data-color|#000000 会改变。

滚动时如何更改背景图像。谁能帮帮我？

谢谢

Answer 1

您需要在图片周围添加 url('image path')。