Javascript jQuery：使用scroll（）和offset（）更改背景

我正在设计一个网站，背景位于一个div中，该div的z-索引为负值，位置为：fixed。然后我有一个部分div可以在上面滚动。我的目标是在scrollTop函数传递每个部分的顶部位置时更改背景图像。我的jQuery代码当前使用以下命令创建每个部分的数组：

var secTops = [];

$('section').each(function(i) {
    var t = $(this).offset();
    secTops.push(t.top);
});

然后，我想在scroll（）上创建一个变量，即scrollTop（）位置，如下所示：

$(window).scroll(function() {
    var winTop = $(this).scrollTop();
});

但这就是我被困的地方。我能想到的最好的办法（这不合适）是：

for（i=0；i<$（'section'）。长度；i++）{
var pos=部门运营[i]；
如果（winTop

但这是不对的。您可以忽略my.css（）函数的后半部分。我已经创建了变量并适当地标记了我的图像，所以我知道这是可行的。现在，for循环贯穿整个迭代，并停留在完整的section.length上，因此仅在两个背景图像之间翻转。我需要它来不断地对照我的分区的顶部位置检查我的winTop变量，并相应地更改背景。我可以用很多if/then，或者甚至是一个很长的切换来实现这一点，但必须有一个更干净的方法来实现这一点。有人能帮我吗

---

这里有一个JSFIDLE，它使用颜色而不是图像，但显示了相同的问题

这没有机会奏效。您需要将其更改为以下内容（这是一种伪代码，只是为了给您一张图片：

sections = [];
$(document).ready(function() {
    $('section').each(function() {
        sections.push($(this))
    });
})

$(window).scroll(function() {
    var s = $(window).scrolTop();
    var currentIndex;

    for ( var i = 0; i < sections.length; i++) {
        if (( s > sections[i].offset().top) && ( s <= sections[i+1].offset().top)) {
            currentIndex = i;
        }
    }
    $('#background').css('background', bgFront + (i+1) + bgBack);
})

sections=[]；
$（文档）.ready（函数（）{
$（'section'）。每个（函数（）{
节。推送（$（此））
});
})
$（窗口）。滚动（函数（）{
var s=$（window.scrolTop（）；
var电流指数；
对于（变量i=0；iif（（s>sections[i].offset（）.top）&&&（s）非常感谢。这真的很接近工作。您有一个输入错误，在$（'#后台）它应该有currentIndex+1。我发现我的第一个背景在scroll上立即跳下，成为我的第二个背景，因此当我向上滚动时，我的第一个背景是空白的？我们需要修改什么？你能把它放在JSFIDLE上吗？修复起来会更容易，试着像这样更改if语句：
如果（（s>=sections[i].offset（）.top）&（s
这里有一个JSFIDLE，它做的事情大致相同。我让它使用颜色来代替图像，但你会注意到它在第一节中不会改变。哦，那是因为它有200px的页边距top。这样做：（注意var t=$（this.offset（）.top-200；）
sections = [];
$(document).ready(function() {
    $('section').each(function() {
        sections.push($(this))
    });
})

$(window).scroll(function() {
    var s = $(window).scrolTop();
    var currentIndex;

    for ( var i = 0; i < sections.length; i++) {
        if (( s > sections[i].offset().top) && ( s <= sections[i+1].offset().top)) {
            currentIndex = i;
        }
    }
    $('#background').css('background', bgFront + (i+1) + bgBack);
})