CSS と JavaScript を使用してヘッダーをページの上部に固定するにはどうすればよいですか?

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

問題:

一度固定されたヘッダーをデザインするユーザーがページ上の特定のポイントを超えてスクロールした場合。これを CSS と HTML で実現することは可能ですか? それとも JavaScript が必要ですか?

CSS と JavaScript を使用した解決策:

CSS と JavaScript を使用してスティッキー ヘッダーを作成するには、次の手順に従ってください:

1. HTML:
   を追加します。ヘッダーを表示するページに「sticky」クラスの要素を追加します。

2. CSS: 次のプロパティを持つ「fixed」という名前の CSS クラスを定義します。

   • 位置: 固定;
   • 上: 0;
   • 左: 0;
   • 幅: 100%;

3. JavaScript (jQuery): 次の JavaScript コードを使用して、スクロール イベント ハンドラーをウィンドウ オブジェクトにアタッチします:

   <code class="js">$(window).scroll(function() {
     var sticky = $('.sticky'),
         scroll = $(window).scrollTop();
   
     if (scroll >= 100) {
       sticky.addClass('fixed');
     } else {
       sticky.removeClass('fixed');
     }
   });</code>

拡張例:

スティッキー ヘッダーのトリガー ポイントが不明な場合は、.offset().top メソッドを使用して、スティッキー要素がいつ画面の上部に到達するかを判断できます。 。更新された JavaScript コードは次のとおりです:

<code class="js">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/501/
• 拡張例: http://jsfiddle.net/gxRC9/502/

このアプローチでは、CSS と JavaScript の組み合わせを使用してスティッキー ヘッダーを作成し、クロスブラウザーにすることができます。互換性があり、実装が比較的簡単です。

以上がCSS と JavaScript を使用してヘッダーをページの上部に固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。