JavaScript/JQuery 改变滚动背景

Question

我试图找到一种为单页机制作可变背景图像的方法。基本上当用户向下滚动到“关于我们”部分时，该部分应该有一个特定的背景图像，一个用于“联系”等等。要么我找不到它，要么互联网上没有足够的关于这个主题的例子。在阅读了关于 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

$(window).scroll(function () {
    var image_url = 'http://7-themes.com/data_images/out/39/6901356-free-background-images.jpg';
    console.log($(window).scrollTop());
    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 + ')');
    //^^^^^^                          ^^^^^^               ^^^   
});

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