jQuery: использование scroll() и offset() для изменения фона

Я разрабатываю веб-сайт, где фон находится в div с отрицательным z-индексом с 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 и, таким образом, переключается только между двумя фоновыми изображениями. Мне нужно это, чтобы постоянно проверять мою переменную winTop на верхние позиции моих разделов и соответствующим образом изменять фон. Я мог бы сделать это с большим количеством if/then или, может быть, даже с длинным переключателем, но должен быть более чистый способ сделать это. Может кто-нибудь помочь мне здесь?

Вот JSFiddle, который использует цвета вместо изображений, но показывает те же проблемы. http://jsfiddle.net/kyleshevlin/5N5WU/1/


javascript scroll for-loop jquery offset
person Kyle Shevlin    schedule 16.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

у этого нет шансов сработать. вам нужно изменить его на что-то вроде этого (это своего рода псевдокод, просто чтобы дать вам картинку:

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);
})
person LorDex    schedule 16.08.2013
comment
Большое спасибо. Это очень близко к работе. У вас есть одна опечатка, в строке $('#background) она должна иметь currentIndex + 1. Я обнаружил, что мой первый фон сразу прыгает вниз при прокрутке и становится моим вторым фоном, и, таким образом, когда я прокручиваю обратно вверх, мой первый фон пуст? Что нам нужно изменить? - person Kyle Shevlin; 17.08.2013
comment
Вы можете поставить его на jsfiddle? было бы проще исправить - person LorDex; 19.08.2013
comment
на самом деле, попробуйте изменить оператор if следующим образом: if (( s >= sections[i].offset().top) && ( s < sections[i+1].offset().top)) - person LorDex; 19.08.2013
comment
вот jsfiddle, который делает примерно то же самое. Вместо изображений я использую цвета, но вы заметите, что они не меняются для первого раздела. jsfiddle.net/kyleshevlin/5N5WU - person Kyle Shevlin; 19.08.2013
comment
о, это потому, что ‹section› имеет верхнее поле 200px. Сделайте это так: jsfiddle.net/5N5WU/3 (обратите внимание, var t = $(this) .offset().топ-200; ) - person LorDex; 20.08.2013
comment
Когда я использую эту скрипку, она меняется, когда нижняя часть раздела прокручивается вверху, а не в верхней части раздела. Я думаю, что мы приближаемся, хотя. Определенно самый близкий результат к тому, что я имел в виду до сих пор. - person Kyle Shevlin; 20.08.2013