JavaScript / JQuery更改滚动背景

Question

我试图找到一种方法来为一个寻呼机制作可变的背景图像。 基本上，当用户向下滚动到“关于我们”部分时，该部分应有一个特定的背景图像，“联系”应有一个背景图像，依此类推。 可能是我找不到它，或者互联网上没有足够的有关此主题的示例。 阅读有关堆栈溢出的一些问题后，我想到了以下代码：

<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

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

Answer 3

这段代码对您有用（就像在mentoinded的其他答案中一样）：

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