CSS、HTML、jQuery を使用してスティッキー ヘッダーを作成する方法

CSS、HTML、jQuery を使用してスクロール時にヘッダーを固定する

ページが下にスクロールしても固定されたままになるヘッダーを作成するのは、共通の設計要件。これは、CSS、HTML、および JavaScript (jQuery) の組み合わせを使用して実現できます。

CSS、HTML を使用した実装

CSS では、次の位置が提供されます。プロパティを要素に適用すると、スクロールに関係なく、ページ上の要素の位置を固定できます。ただし、要素をいつ固定するかを決定するトリガー ポイントが必要です。

JavaScript (jQuery) の役割

スクロール イベントを監視して決定するには、JavaScript が必要です。ヘッダー要素に固定クラスを適用するタイミング。 jQuery を使用すると、スクロール イベントを検出し、それに応じて固定クラスを追加または削除する簡単なスクリプトを作成できます。

HTML コード

<code class="html"><div class="sticky"></div></code>

CSS コード

<code class="css">.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}</code>

jQuery コード

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

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});</code>

この例では、スクロール位置 (scrollTop) が超えたときに固定クラスがスティッキー要素に適用されます100ピクセル。この値は、特定の設計要件に基づいて調整できます。

拡張例: 動的トリガー ポイント

要素を修正するためのトリガー ポイントが不明な場合は、 offset().top.を使用して動的に決定されます

<code class="javascript">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>

このコードは、スティッキー要素の垂直位置を動的に測定し、ビューポートの上部に到達したときに修正します。

これらを組み合わせることで、テクニックを使用すると、CSS、HTML、jQuery を使用してスティッキー ヘッダーを作成できます。

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