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

});

A working fiddle

背景颜色并非在所有触发器上都改变

1 个答案: