当元素到达视口顶部时添加类

Question

我试图在元素到达视口顶部时向标头添加一个类，但是我似乎无法找出为什么它不起作用。我没有错误，并且检查了jquery正在获取偏移量，并且确实如此。任何帮助都会很棒。我也想知道如何将这段代码扩展到任意数量的部分，而不是仅仅说明6。

JS菲德尔

$(document).ready(function () {
    var project1 = $('section:nth-child(1)').offset();
    var project2 = $('section:nth-child(2)').offset();
    var project3 = $('section:nth-child(3)').offset();
    var project4 = $('section:nth-child(4)').offset();
    var project5 = $('section:nth-child(5)').offset();
    var project6 = $('section:nth-child(6)').offset();
    var $window = $(window);

    $window.scroll(function () {
        if ($window.scrollTop() >= project1) {
            $("header").removeClass().addClass("project1");
        }
        if ($window.scrollTop() >= project2) {
            $("header").removeClass().addClass("project2");
        }
        if ($window.scrollTop() >= project3) {
            $("header").removeClass().addClass("project3");
        }
        if ($window.scrollTop() >= project4) {
            $("header").removeClass().addClass("project4");
        }
        if ($window.scrollTop() >= project5) {
            $("header").removeClass().addClass("project5");
        }
        if ($window.scrollTop() >= project6) {
            $("header").removeClass().addClass("project6");
        }
    });
});

Answer 1

的方法.offset()，则返回包含属性的对象top和left：

{top: 1808, left: 8}

因此，您需要top在条件语句中访问该属性。

更改

if ($window.scrollTop() >= project1) { ... }

至：

if ($window.scrollTop() >= project1.top) { ... }

更新示例

附带说明一下，$('section:nth-child(1)').offset()由于section元素不是第一个元素（即<header>is），因此将是未定义的。使用:nth-of-type而不是:nth-child。由于您使用的是jQuery，因此也可以使用eq()。

{top: 1808, left: 8}

if ($window.scrollTop() >= project1) { ... }

if ($window.scrollTop() >= project1.top) { ... }