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

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

問題:

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

解決策:

<br>$(window).scroll(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

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

ログイン後にコピー

});

正しい構文:

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

クラスのリセット:

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

<br>$(window).scroll(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var scroll = $(window).scrollTop();

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

ログイン後にコピー