當元素到達視口頂部時添加類

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>是）。 使用:nth-of-type而不是:nth-child 。 由於您使用的是jQuery，因此eq()也可以使用。

 $(document).ready(function() { var project1 = $('section:nth-of-type(1)').offset(); var project2 = $('section:nth-of-type(2)').offset(); var project3 = $('section:nth-of-type(3)').offset(); var project4 = $('section:nth-of-type(4)').offset(); var project5 = $('section:nth-of-type(5)').offset(); var project6 = $('section:nth-of-type(6)').offset(); var $window = $(window); $window.scroll(function() { if ( $window.scrollTop() >= project1.top) { $("header").removeClass().addClass("project1"); } if ( $window.scrollTop() >= project2.top ) { $("header").removeClass().addClass("project2"); } if ( $window.scrollTop() >= project3.top ) { $("header").removeClass().addClass("project3"); } if ( $window.scrollTop() >= project4.top ) { $("header").removeClass().addClass("project4"); } if ( $window.scrollTop() >= project5.top ) { $("header").removeClass().addClass("project5"); } if ( $window.scrollTop() >= project6.top ) { $("header").removeClass().addClass("project6"); } }); }); 

 header { position: fixed; top: 0; left: 0; right: 0; height: 100px; background: #000; } header.project1 { background: red; } header.project2 { background: orange; } header.project3 { background: blue; } header.project4 { background: green; } header.project5 { background: red; } header.project6 { background: blue; } section { height: 900px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header></header> <section>Section 1</section> <section>Section 2</section> <section>Section 3</section> <section>Section 4</section> <section>Section 5</section> <section>Section 6</section>