jQuery を使用して垂直スクロール位置に基づいてヘッダーのクラスを動的に変更するにはどうすればよいですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Susan Sarandon

Dec 03, 2024 pm 07:50 PM

How Can I Dynamically Change a Header's Class Based on Vertical Scroll Position Using 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");
}

ログイン後にコピー

});

パフォーマンス最適化:

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

<br>$(function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。