Question

我一直在努力尝试在滚动时更改背景图像。我尝试了解决类似问题的解决方案，但到目前为止没有运气，它只会显示第一张背景图片。

基本上我将背景设置为固定位置和几个div，每个div都是视口的大小，每个div的上边距都是视口高度的大小。换句话说，当滚动时，用户仅在滚动经过每个div之后才看到背景图像。我希望背景图像在滚动到每个div后更改。

以下是代码：

$(window).scroll(function() {
    var windowY = $(window).height();
    var scrolledY = $(window).scrollTop();
    var image_url = '/images/image1.jpg';

    if (scrolledY > windowY) {
        image_url = '/images/image2.jpg';
        }

    $('body').css('background', "url(" + img_url + ")");

});

提前致谢！

Answer 1

你有两个拼写错误，括号是你的image_url变量名。最初你有：

$(body).css('background', "url(" + img_url) + "'";

更改为：

$(body).css('background', "url(" + image_url + ")");

括号不正确，最终是最后的串联字符串。此外，您的变量已声明为image_url，但在css函数中，您使用了img_url。

Answer 2

将通话更改为您的背景属性

$(window).scroll(function() {
    var windowY = $(window).height();
    var scrolledY = $(window).scrollTop();
    var image_url = '/images/image1.jpg';

    if (scrolledY > windowY) {
    image_url = '/images/image2.jpg';
    backgroundChange(image_url);
    }
});


function backgroundChange(img_url){
  $("body").css("background", "url(" + img_url + ")");
}

jQuery在滚动时更改背景图像

2 个答案: