コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > jQuery を使用して垂直スクロール位置に基づいてヘッダーのクラスを動的に変更するにはどうすればよいですか?

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

Susan Sarandon

リリース： 2024-12-03 19:50:14

オリジナル

399 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：クロスドメイン iframe のサイズを確実に変更するにはどうすればよいですか? 次の記事：フレックスボックスを使用して柔軟な中心を持つ固定幅の列を作成するにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事