javascript - jQuery: scroll() と offset() を使用して背景を変更する

Question

position:fixed で負の z-index を持つ div に背景が配置されている Web サイトを設計しています。次に、それをスクロールするセクション div があります。私の目標は、各セクションの上部の位置が scrollTop 関数によって渡されたときに背景画像を変更することです。私のjQueryコードは現在、次を使用して各セクションのトップ位置の配列を作成します:

var secTops = [];

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

それから、次のように scrollTop() 位置である scroll() で変数を作成すると考えました。

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