如何使用 jQuery 根據垂直滾動位置新增和刪除 CSS 類別？

基於垂直滾動使用jQuery 添加/刪除類別

在這種情況下，目標是從「標題」中刪除該類別一旦使用者向下滾動一定距離，元素就會套用不同的類別來改變其外觀。然而，由於一些小錯誤，提供的程式碼無法如預期運作。

修正後的程式碼如下：

$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    // >=, not <=
    if (scroll >= 500) {
        // clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
});

主要問題有三：

1. 比較運算子不正確；應該是>= 來檢查滾動位置是否大於或等於500。
2. 要刪除的類別名稱被錯誤地拼寫為clearheader，而不是clearHeader。
3. ;函數宣告末尾缺少。

除了修復這些錯誤之外，請考慮以下事項：

• 與其刪除clearHeader 類，不如添加darkHeader 類別。這會在修改標題外觀的同時保留標題的位置。
• 要在向上滾動時重置類，請使用第二個條件，如下所示：

if (scroll >= 500) {
    $(".clearHeader").addClass("darkHeader");
} else {
    $(".clearHeader").removeClass("darkHeader");
}

最後，快取標頭的 jQuery物件可以提高效能，特別是如果您打算多次修改其類別：

var header = $(".clearHeader");
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('clearHeader').addClass("darkHeader");
    } else {
        header.removeClass("darkHeader").addClass('clearHeader');
    }
});

透過解決這些問題問題，您現在可以根據使用者的垂直捲動位置有效地在標題中新增和刪除類別。

以上是如何使用 jQuery 根據垂直滾動位置新增和刪除 CSS 類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！