Цвет фона не меняется на всех триггерах

Question

Я хочу, чтобы фиксированный элемент менял цвет фона в зависимости от того, какой раздел пользователь прокручивает в прошлом. Код, который у меня есть, работает в одном разделе, но не в других. В качестве теста я настроил его также на изменение цвета фона самих разделов, и он работает.

$(window).scroll(function () {
    $(".section").each(function () {
        var box = $("#box");
        var BoxTop = box.position().top;
        var BoxBottom = BoxTop + box.outerHeight();
        var section = $(this);
        var sectionTop = section.position().top - $(window).scrollTop() + 15;
        var sectionBottom = section.position().top - $(window).scrollTop() + section.height();
        if ((sectionTop >= BoxTop && sectionTop <= BoxBottom) || (sectionTop <= BoxTop && sectionBottom >= BoxBottom) || (sectionBottom >= BoxTop && sectionBottom <= BoxBottom)) {
            section.css("background", "blue");
            box.css("background", "blue");
        } else {
            section.css("background", "red");
            box.css("background", "red");
        }
    });

});

Скрипка: http://jsfiddle.net/xo1Lyfnc/1/

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что вы перебираете все секции и соответственно меняете фон.

Поскольку вы не выходите из цикла (при совпадении с разделом), результат будет переопределен в следующей итерации цикла. Это означает, что требуемая функциональность будет работать только для последних .section на странице.

Чтобы это работало для всех ваших разделов, просто разорвите цикл после того, как вы сопоставите раздел. В функции jQuery each вы можете сделать это, вернув false.

Ваш обновленный код:

$(window).scroll(function () {
    $(".section").each(function () {
        var box = $("#box");
        var BoxTop = box.position().top;
        var BoxBottom = BoxTop + box.outerHeight();
        var section = $(this);
        var sectionTop = section.position().top - $(window).scrollTop() + 15;
        var sectionBottom = section.position().top - $(window).scrollTop() + section.height();
        if ((sectionTop >= BoxTop && sectionTop <= BoxBottom) || (sectionTop <= BoxTop && sectionBottom >= BoxBottom) || (sectionBottom >= BoxTop && sectionBottom <= BoxBottom)) {
            section.css("background", "blue");
            box.css("background", "blue");
            return false; // We found a match, so stop trying to match the other sections.
        } else {
            section.css("background", "red");
            box.css("background", "red");
        }
    });

});

Рабочая скрипка