jQuery を使用して垂直スクロール位置に基づいてヘッダーのクラスを動的に変更するにはどうすればよいですか?

垂直スクロールによる JQuery ベースのクラス操作

問題:

を変更しようとしていますユーザーがスクロールするとヘッダー要素のクラスが変更され、外観が変わります。ただし、現在のアプローチは期待どおりに機能しません。

解決策:

<br>$(window).scroll(function() {<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

// Update using correct operator (>=, not = 500) {
    // Use correct class name (clearHeader, not clearheader)
    $(".clearHeader").addClass("darkHeader");
}

});

正しい構文:

> の正しい使用法を確認します。 = 演算子と、clearHeader クラス名が重要です。また、clearHeader クラスは削除しないでください。削除すると、固定位置とその再選択機能が削除されます。

クラスのリセット:

次の場合にクラスの変更をリセットします。上にスクロールして、これを使用してくださいコード:

<br>$(window).scroll(function() {<pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

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

});

パフォーマンス最適化:

効率を高めるために、ヘッダーの jQuery オブジェクトをキャッシュします:

<br>$(function() {<pre class="brush:php;toolbar:false">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 サイトの他の関連記事を参照してください。