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

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

CSS を使用して実装すると、HTML

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

JavaScript (jQuery) の役割

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

HTML コード

CSS コード

.fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
}

jQuery コード

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

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

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

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

要素を固定するためのトリガー ポイントが不明な場合は、次のようにすることができます。 offset().top.

var stickyOffset = $('.sticky').offset().top;

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

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

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

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