Question

我正在设计一个网站，其中背景位于具有负z-index且位置为fixed的div中。然后我有部分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);
})

jQuery：使用scroll（）和offset（）来改变背景

1 个答案: