所有触发器的背景颜色都不会改变

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 qazxsw poi函数中，你可以通过返回qazxsw poi来做到这一点。

您更新的代码：

each

false