CSS と JavaScript を使用してスクロールに固定ヘッダーを作成する方法

CSS と JavaScript を使用したスクロール上の固定ヘッダーの作成

このシナリオでは、固定されて残り続けるヘッダーを作成することを目的としています。

CSS と HTML のアプローチ

この機能を実現するには、CSS と HTML だけを使用するだけでは十分ではありません。 CSS だけでは、特定のスクロール位置に要素をアタッチするためのソリューションは提供されません。

JavaScript 統合

スクロール時にヘッダーを修正するには、イベント処理に JavaScript が必要です。次の手順で解決策の概要を説明します:

1. 固定位置クラスを定義します:

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

2. 割り当てスクロール上のクラス:

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

   ここで、スクロール位置が 100 ピクセルを超えると、'fixed' クラスが '.sticky' 要素に追加され、所定の位置に固定されます。

例:

次の HTML コードは固定ヘッダーを定義します:

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

デモ:

[Fiddle Demo](https://jsfiddle.net/gxRC9/501/)

拡張例:

トリガーポイントが発生する場合スティッキー要素が画面の上部に達したら、 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>

Extended Demo:

[Extended Fiddle Demo]( https://jsfiddle.net/gxRC9/502/)

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