ホームページ > ウェブフロントエンド > CSSチュートリアル > HTML、CSS、jQuery でスクロールする固定ヘッダーを作成する方法

HTML、CSS、jQuery でスクロールする固定ヘッダーを作成する方法

Susan Sarandon
リリース: 2024-10-31 03:20:31
オリジナル
911 人が閲覧しました

How to Create a Fixed Header That Scrolls with HTML, CSS, and jQuery?

HTML、CSS、jQuery を使用したスクロール固定ヘッダーの作成

Web サイトの機能を強化するには、多くの場合、以下に基づいて動的に動作する要素の作成が必要になります。スクロール中に画面上に固定されたままになるヘッダーなどのユーザー インタラクション。最初は CSS と HTML のみを使用してこの効果を作成することを検討したかもしれませんが、スクロール イベントを監視し、適切な変更を実装するには JavaScript の力が必要です。

これを実現するには、段階的な手順に着手します。解決策:

1.スティッキー コンテナを HTML に追加します。

を作成します。固定ヘッダー コンテナとして機能するクラス "sticky" を使用します。

<code class="html"><div class="sticky"></div></code>
ログイン後にコピー

2.固定位置のスタイルを設定します:

位置と寸法を調整する「固定」クラスを使用して、固定ヘッダーのスタイルを定義します。

<code class="css">.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}</code>
ログイン後にコピー

3. jQuery を使用したスクロール イベント処理の実装:

jQuery のスクロール イベントを利用して、ユーザーのスクロール動作を監視します。スクロール位置に基づいて、「sticky」要素に「fixed」クラスを追加または削除します。

<code class="jquery">$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});</code>
ログイン後にコピー

例: http://jsfiddle.net/gxRC9/501/

さらに、スティッキー要素が画面の上部に到達したときにトリガーポイントを設定する必要があるシナリオに遭遇する可能性があります。このような場合、offset().top メソッドを利用してスティッキー要素の位置を決定し、それに応じてスクロール イベント処理を変更します。

<code class="jquery">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});</code>
ログイン後にコピー

拡張例: http://jsfiddle。 net/gxRC9/502/

これらのテクニックを組み合わせることで、スクロール時にヘッダーが自動的に修正される機能を強化し、最小限のコードと最大の効果で Web サイトのユーザー エクスペリエンスを向上させます。

以上がHTML、CSS、jQuery でスクロールする固定ヘッダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート