如何正確新增和刪除基於垂直滾動的jQuery類別？-css教學-PHP中文網

如何正確新增和刪除基於垂直滾動的jQuery類別？

Linda Hamilton

發布： 2024-11-28 09:28:14

原創

175 人瀏覽過

How to Correctly Add and Remove jQuery Classes Based on Vertical Scroll?

基於垂直滾動添加和刪除jQuery 類別

在這種情況下，用戶想要從「 header」元素，並在用戶向下捲動時將其替換為“darkHeader”類，從而修改其外觀。但是，提供的程式碼無法正常運作。

我們來分析一下原始程式碼：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

登入後複製

除了一些小的調整之外，還有兩個重要問題：

不正確的運算子：比較運算子應該是“>=”而不是“<=”才能正確確定何時更改類別。
選擇器錯誤： 選擇器「.clearheader」不正確，因為它包含小寫「H」。正確的選擇器應該是“.clearHeader”。

以下是解決這些錯誤的修訂代碼：

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").removeClass("clearHeader").addClass("darkHeader");
    }
});

登入後複製

此外，建議不要刪除「clearHeader」類，因為它是負責固定標題。相反，應用一個新的 CSS 類別來修改樣式。

此外，如果您打算在使用者向後捲動時恢復「clearHeader」類，請實現以下程式碼：

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

登入後複製

為了提高效能並避免重複查詢DOM，請考慮快取標頭選擇器：

$(function() {
    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類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！