垂直スクロールに基づいて jQuery クラスを正しく追加および削除する方法-CSSチュートリアル-php.cn

垂直スクロールに基づいて jQuery クラスを正しく追加および削除する方法

Linda Hamilton

リリース： 2024-11-28 09:28:14

オリジナル

173 人が閲覧しました

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

垂直スクロールに基づいた jQuery クラスの追加と削除

このシナリオでは、ユーザーは "clearHeader" クラスを " header" 要素を削除し、ユーザーが下にスクロールして外観を変更するときに、それを "darkHeader" クラスに置き換えます。ただし、提供されたコードは正しく機能しません。

元のコードを分析してみましょう:

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

ログイン後にコピー

いくつかの細かい調整とは別に、2 つの重要な問題があります:

演算子が正しくありません: 比較演算子は、代わりに「>=」である必要があります。クラスを変更するタイミングを正しく識別するための「<=」。
セレクターエラー: セレクター ".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 中国語 Web サイトの他の関連記事を参照してください。