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

このウェブサイトの声明

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