CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS入門】position: sticky;でスクロールに追従する要素を作る方法

CSSのposition: sticky;とは

CSSのposition: sticky;は、スクロール位置に基づいて要素を配置できるプロパティです。通常の状態ではposition: relative;と同じように振る舞いますが、スクロールして指定したしきい値の位置に達すると、要素がその場に「貼り付いた（sticky）」ように固定されます。

例えば、ユーザーがページを下にスクロールした際に、特定の要素を画面上部に固定して表示したい場合に便利です。ナビゲーションバーやセクション見出しなど、常に表示させておきたいUIパーツの実装によく使われています。

position: sticky;の実装例

以下のコードを実行して、position: sticky;の動作を確認してみましょう。ページをスクロールすると、オレンジ色のボックスが画面上部に固定される様子がわかります。

<!DOCTYPE html>
<html>
<head>
  <style>
    div.sticky {
      position: -webkit-sticky; /* Safari向けの記述 */
      position: sticky;
      top: 0;
      padding: 10px;
      background-color: orange;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <p>スクロールして動作を確認してみてください！</p>
  <div class="sticky">Sticky!</div>
  <div style="padding-bottom: 2000px;">
    <p>これはデモ用のテキストです。</p>
    <p>下にスクロールすると、sticky要素が確認できます。</p>
  </div>
</body>
</html>

実装時のポイント

  • topなどの指定が必須：sticky要素を固定するには、top（またはbottom、left、right）でしきい値を指定する必要があります。未指定の場合、stickyは機能しません。
  • Safariへの対応：古いバージョンのSafariでは、ベンダープレフィックス付きのposition: -webkit-sticky;を併記しておくと安心です。
  • 親要素の高さに依存する：sticky要素が固定されるのは親要素の範囲内だけです。親要素の高さが不足していると、スクロールしても長く固定されないため注意しましょう。

position: sticky;を活用すれば、JavaScriptに頼らずCSSだけで追従ヘッダーやサイドバーなどを簡単に実装できます。ぜひ実際のプロジェクトでも試してみてください。

  1. CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説

    CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "

  2. IntersectionObserverを使って要素がCSSのposition:stickyで固定されるタイミングを検出する方法

    position: stickyが適用された要素は、スクロールに応じて固定されますが、そのタイミングをJavaScriptで直接取得するAPIは存在しません。そこで便利なのがIntersectionObserver（交差オブザーバー）です。スティッキー要素にさまざまなCSSスタイルを組み合わせることで、要素が固定された瞬間を簡単に検出できます。 仕組みのポイント このテクニックでは、スティッキー要素の直前に配置した小さな「監視用」要素をIntersectionObserverで監視します。ページをスクロールしてスティッキー要素が画面上部に固定されると、監視用要素は完全にビューポート外に出るため