Question

我试图找到一种为一个寻呼机制作可变背景图像的方法。基本上当用户向下滚动到＆＃34;关于我们＆＃34;部分应该有该部分的特定背景图像，一个用于＆＃34;联系＆＃34;等等。我要么无法找到它，要么在互联网上没有足够的例子来讨论这个话题。在阅读Stack Overflow上的一些问题后，我想出了这段代码：

<style>
    body {
        background-image:url('http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg');
    }
</style>
<script type="text/javascript">
    $(window).scroll(function() {
        var image_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';
        if ($(window).scrollTop() > 800) {
            image_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
        }
        $(body).css('background-image', image_url);
    });
</script>

它似乎不起作用，我不明白为什么。该网站具有响应性，因此解决方案应包括一些解释，至少使其适用于不同的解决方案。

Answer 1

语法错误应该是这样的：

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

你可以试试

if($(this).scrollTop() > 800)

Answer 2

body {
    background-image:url('http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

tail -n 1

Answer 3

此代码适合您（如其他答案中的指导）：

$(window).scroll(function() {
    var image_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';

    if ($(window).scrollTop() > 800) {
        image_url = 'http://www.designbolts.com/wp-content/uploads/2014/03/Yellow-blur-background1.jpg';
    }

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

但是，如果您更改网站上的内容并且图像不应更改为800像素但900像素，该怎么办？对于此问题，您不应在脚本中定义800像素硬编码，而应使用$("#whateverSection").offset().top变量。请查看此jsFiddle

通过这种方式，您可以在网站的特定部分滚动时轻松决定要显示的图片。

$(window).scroll(function() {
    var image_url = 'default.jpg';

    if ($(window).scrollTop() > $("#section1").offset().top) {
        image_url = 'img1.jpg'
    }
    else if ($(window).scrollTop() > $("#section2").offset().top) {
        image_url = 'img2.jpg'
    }
    ...
    else if ($(window).scrollTop() > $("#sectionX").offset().top) {
        image_url = 'imgX.jpg'
    }

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

Answer 4

应该使用

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

确保你的选择器没问题

https://jsfiddle.net/js7tadve/

JavaScript / JQuery在滚动时更改背景

4 个答案: