ブートストラップのスクロールで粘着性のサイドバーを作成する方法

ブートストラップを備えたスティッキーサイドバーを作成する最も簡単な方法は、トップオフセットを備えた組み込みのスティッキートップクラスを使用することです。 1.サイドバーコンテンツラッピング要素にスティッキートップクラスを追加し、style = "top：20px;"頭との重複を避けるため。 2。親コンテナ（COL-MD-3など）に、オーバーフローなどの粘着性の行動に影響を与えるスタイルがないことを確認してください。 3.オプションで位置を設定します。カスタムCSSを介して粘着し、高さを追加します：100VHとオーバーフロー-Y：サイドバーでのスクロールをサポートする自動。 4.古いブラウザやダイナミックコントロールと互換性がある場合は、JavaScriptを使用してスクロールイベントをリッスンし、固定トップクラスに切り替えることができますが、追加のJS、より良いパフォーマンス、シンプルさはありません。

ブートストラップで粘着性のサイドバーを作成するのは簡単です。特に、ブートストラップの組み込みクラスと、コントロール用の小さなCSSまたはJavaScriptがあります。ユーザーがページをスクロールするときに視界を維持するサイドバーを実装する方法は次のとおりです。

Bootstrapのposition-stickyクラスを使用します

ブートストラップで粘着性のサイドバーを作成する最も簡単な方法はposition-stickyユーティリティクラスを使用することです。これは最新のブラウザでうまく機能し、最小限のコードが必要です。

1。基本的なHTML構造

<div class = "container-fluid">
  <div class = "row">
    <！ - スティッキーサイドバー - >
    <div class = "col-md-3">
      <div class = "sticky-top" style = "top：20px; background：＃f8f9fa; padding：20px; height：100vh;">
        <h5>サイドバー</h5>
        <ul class = "nav flex-column">
          <li class = "nav-item"> <a class = "nav-link" href = "＃"> link 1 </a> </li>
          <li class = "nav-item"> <a class = "nav-link" href = "＃"> link 2 </a> </li>
          <li class = "nav-item"> <a class = "nav-link" href = "＃"> link 3 </a> </li>
        </ul>
      </div>
    </div>

    <！ - メインコンテンツ - >
    <div class = "col-md-9">
      <h1>メインコンテンツ</h1>
      <p>下にスクロールして、サイドバーが上部に付着するのを見る... </p>
      <！ - スクロールを有効にするのに十分なコンテンツを追加 - >
      <div style = "height：1500px;">
        <p>ここでは、スクロールをトリガーするための長いコンテンツ</p>
      </div>
    </div>
  </div>
</div>

2。それを機能させるためのキーポイント

• 内側の要素でsticky-topを使用します（列自体ではありません）。
• style="top: 20px;"を使用してtopオフセットを追加します。したがって、サイドバーはビューポートの最上部に固執しません（ヘッダーのオーバーラップを回避します）。
• 親列（ col-md-3 ）にoverflow: hiddenまたは類似。
• オプションでは、コンテンツが短い場合は早期に解放されないように、固定された高さまたはパディング（ height: 100vhなど）を設定します。

CSSで動作をカスタマイズする（オプション）

さらにコントロールが必要な場合は、カスタムCSSを使用してください。

 .sidebar-sticky {
  位置：-webkit -sticky;
  位置：粘着性;
  トップ：20px;
  高さ：100VH;
  Overflow-y：auto;
}

sticky-topの代わりにこのクラスを適用します。

 <div class = "col-md-3">
  <div class = "sidebar-sticky">
    <！ - サイドバーコンテンツ - >
  </div>
</div>

これは、ビューポートよりも長い場合、サイドバー自体内でスクロールすることを許可する場合に役立ちます。

考慮事項とヒント

• ブートストラップバージョン：これは、ブートストラップ4と5で機能します。
• レスポンシブデザイン：小さな画面では、粘着性の動作を無効にすることができます。必要に応じて、 d-none d-md-blockなどのレスポンシブクラスを使用します。
• 競合：親要素に対するtransform 、 filter 、またはperspective使用を避けてください - それらはposition: sticky 。
• パフォーマンス： position: stickyはパフォーマンスがあり、ブラウザ原産であるため、ほとんどの場合JavaScriptは必要ありません。

オプション：JavaScriptフォールバック（まれに必要ありません）

古いブラウザをサポートする必要がある場合、または動的動作を追加する必要がある場合（特定の時点で粘着性を停止するなど）、JavaScriptを使用できます。

 const sidebar = document.queryselector（'。sidebar-sticky '）;
const offsettop = sidebar.offsettop;

window.onscroll = function（）{
  if（window.pageyoffset> = offsettop）{
    sidebar.classlist.add（ '固定対象'）;
  } それ以外 {
    sidebar.classlist.remove（ '固定対象'）;
  }
};

CSSで.fixed-topクラスを追加します。

 .fixed-top {
  位置：修正;
  トップ：20px;
  幅：25％; / *列に基づいて調整 */
}

しかし、このアプローチはposition: stickyよりも複雑で信頼性が低いです。

ほとんどの場合、 topオフセットでsticky-topを使用してください。シンプルで清潔で、最新のレイアウトで完全にサポートされています。

基本的に、それが必要なすべてです - プラグインも複雑なJSもありません。

以上がブートストラップのスクロールで粘着性のサイドバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。