jQuery の Scroll イベントを使用してヘッダー スタイルを動的に変更するにはどうすればよいですか?

jQuery Scroll Event を使用したヘッダー スタイルの動的変更

問題定義

目標は、ヘッダー要素が以下に基づいてスタイルを変更する機能を実装することです。ユーザーの垂直スクロール位置。 1 つのクラスを削除し、別のクラスを追加して、ユーザーが特定のポイントを超えて下にスクロールしたときにヘッダーの外観を変更したいと考えています。

jQuery の実装

提供されたコードは、jQuery の .scroll() 関数を使用しようとします。ウィンドウがスクロールされたときにイベントをトリガーします。ただし、実装にはいくつかのエラーがあります。

コードが正しくありません

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

エラーは修正されました

1. クラス名の矛盾: "clearheader " を "clearHeader" (クラス内では大文字の "H") に修正する必要があります。 name).
2. 演算子が間違っています: 比較演算子は、「<=」 (以下) ではなく、「>=」 (以上) である必要があります。
3. 閉じ括弧がありません: の終わりに閉じ括弧がありません。 function.

修正されたコード

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

ログイン後にコピー

代替アプローチ

クラスを削除および追加する代わりに、スタイルをオーバーライドする新しい CSS クラスを作成することをお勧めします。既存のクラス。このメソッドを使用すると、ヘッダーの外観をより適切に制御できます。

上スクロール時のスタイルのリセット

ユーザーが上にスクロールしたときにヘッダーのスタイルをリセットするには、コードに次の条件を追加します。

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

ログイン後にコピー

最適化

ヘッダー要素の jQuery オブジェクトをキャッシュすると、より良い結果が得られますパフォーマンス:

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

ログイン後にコピー

以上がjQuery の Scroll イベントを使用してヘッダー スタイルを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。