jQuery：使用 scroll() 和 offset() 改变背景

Question

我正在设计一个网站，其中背景位于一个 div 中，该 div 具有负 z-index 和 position: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').length; i++) {
    var pos = secTops[i];
    if (winTop < pos) {
        $('#background').css('background', bgFront + (i+1) + bgBack);
    } else {
        $('#background').css('background', bgFront + (i+2) + bgBack);
    };
};

但这是不对的。您可以忽略我的 .css() 函数的后半部分。我已经创建了变量并适当地标记了我的图像，所以我知道这是可行的。现在，for 循环贯穿整个迭代并停留在整个 section.length 处，因此仅在 2 个背景图像之间翻转。我需要这个来不断检查我的 winTop 变量与我的部分的顶部位置并相应地更改背景。我可以用很多 if/then 来做到这一点，甚至可能是一个冗长的开关，但必须有一种更简洁的方法来做到这一点。有谁能帮帮我吗？

这是一个使用颜色而不是图像但显示相同问题的 JSFiddle。 http://jsfiddle.net/kyleshevlin/5N5WU/1/

Answer 1

这没有机会工作。你需要把它改成这样（这有点伪代码，只是给你一张图片：

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);
})