背景颜色不会在所有触发器上改变

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");
        }
    });

});

Fiddle: 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");
        }
    });

});

A working fiddle

背景颜色不会在所有触发器上改变

Background colour doesn't change on all triggers

jquery

background-color