position: sticky;の仕組みや実際の使い方をやさしく解説

Post on:2022年2月7日

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。

position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。

position: sticky;の使い方を解説

CSS Position Sticky - How It Really Works!
by Elad Shechter


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

CSSのposition: sticky;は多くのブラウザにサポートされるようになりましたが、あまり多くの制作者に使用されていません。その理由は2つ考えられます。

1つ目の理由は、ブラウザのサポートに待たされたことです。ブラウザにサポートされるまでにかなりの時間がかかりました。

2つ目の理由は、ほとんどの制作者はposition: sticky;がどのように機能するのか背景にあるロジックを完全に理解していないためです。

potion: sticky;が分かると、すごい便利！

potion: sticky;が分かると、すごい便利！

CSSのpositionプロパティを理解していると想定し、簡単に説明します。

3年前までCSSには、static, relative, absolute, fixed の4つのpositionがありました。この4つの主な違いは、DOMのフローで占めるスペースです。staticとrelativeはドキュメントのフローで自然なスペースを保ちます。しかし、absoluteとfixedはそうではなく、スペースは取り除かれ、フロートしているような振る舞いをします。

これから詳しく説明しますが、potion: sticky;はこれらすべてと類似点があります。

position: sticky;はじめの一歩

ほとんどの人がpotion: sticky;を試したことがあると思います。私は、私自身がpotion: sticky;を理解できていなかったと悟るまで、かなりの時間を要しました。

potion: sticky;を試した時、誰もが定義された位置にビューポートが到達したときにその要素が固定されていることをすぐに理解するでしょう。

下記のようなコードで試したと思います。

問題となるのは、時にはうまく機能し、時にはうまく機能しないことです。うまく機能すると、要素はくっつきます。しかし、うまく機能しないと、思った通りにくっつきません。

CSSに毎日携わる一人の制作者として、仕様を根本的に理解していないことは受け入れられないので、私は徹底的にpotion: sticky;を探求することにしました。

position: sticky;の仕様

私は最初に試した際、要素が入れ子の時に気がついたことがあります。potion: sticky;を定義した要素がコンテナの内側にある唯一の要素の場合、うまく機能しません。

しかし、コンテナ内に他の要素を加えると、うまく機能します。
なぜだと思いますか？

その理由は、要素にpotion: sticky;が定義されている場合、その要素のコンテナが要素を貼り付けることができる唯一のエリアだからです。その要素は兄弟要素上でしかフロートできないため、フロートすることができません。

position: sticky;はどのように機能するのか

CSSのpotion: sticky;には、スティッキーアイテムとスティッキーコンテナという2つの主要部分が必要です。

スティッキーアイテム
スティッキーアイテムとは、potion: sticky;でスタイルを定義した要素です。ビューポートのポジションが定義したポジションと一致すると、その要素はフロートします。

コードは下記のようになります。

スティッキーコンテナ
スティッキーコンテナとは、スティッキーアイテムをラップするHTML要素です。これはスティキーアイテムがフロートすることができる最大のエリアになります。

potion: sticky;で要素を定義すると、自動的に親要素がスティッキーコンテナとして定義されます。これは覚えておくことが非常に重要です。コンテナはスティッキーアイテムの範囲であり、アイテムはスティッキーコンテナから出ることはできません。

これが、前述の例でスティッキーアイテムが機能しなかった理由です。スティッキーアイテムは、スティッキーコンテナ内の唯一の子要素でした。

スティッキーアイテムとスティッキーコンテナの関係

スティッキーアイテムとスティッキーコンテナの関係

実際の動作は、デモページでご覧ください。

See the Pen
Positon Sticky by Elad Shechter (@elad2412)
on CodePen.

position: sticky;の動作を理解する

前述したように、potion: sticky;は他のpositionとは異なる動作をしますが、その一方で類似点がいくつかあります。

  • Relative (or Static)
    スティッキーで配置された要素は、DOM内の自然なギャップを維持するため（フローにとどまる）、relativeとstaticに類似しています。
  • Fixed
    要素がくっついた時はまさに、position: fixed;と同じように振る舞います。ビューポートの同じポジションにフロートし、フローから取り除かれます。
  • Absolute
    スティッキーエリアの最後で、要素は停止し、他の要素の上に重なります。これはposition: relative;で絶対位置に配置された要素と同じ振る舞いです。

position: sticky;の便利な使い方

ほとんどの場合、要素を一番上にくっつけるためにpotion: sticky;を使用するでしょう。例えば、下記のコードのように。

potion: sticky;は、要素を下に貼り付けるために使うこともできます。つまり、フッタを固定位置になるように定義でき、スクロールダウンすると常に一番下に固定されるように実装できます。スティッキーコンテナの端に達すると、その要素は自然な位置で止まります。本来の位置がスティッキーコンテナの下部にある要素に使用するのが適切です。

コードは、非常にシンプルです。
コンテナ内にヘッダ・コンテンツ・フッタを配置します。

フッタ（.main-footer）をスティッキーアイテムにし、bottom: 0;を定義します。

実際の動作は、デモページでご覧ください。

See the Pen
Positon Sticky to Bottom by Elad Shechter (@elad2412)
on CodePen.

私はこのテクニックをサマリーテーブルに使用しています。またフッタのナビゲーションでも非常にうまく機能します。

ブラウザのサポート

position: sticky;のサポートブラウザ

position: sticky;のサポートブラウザ

  • potion: sticky;は、すべての主要ブラウザでサポートされています。
  • Safari 12.1以前では、プレフィックス（-webkit）を加える必要があります。

訳者注:
古いIEにも対応させたい場合は、ポリフィルが便利です。

終わりに -参考記事

私の経験から学んだことが、あなたのためになることを願っています。

私のCSSに関する記事

私の名前はElad Shechterで、CSSおよびHTMLの設計とアーキテクチャを専門とするWeb開発者で、Investing.comに勤務しています。

sponsors

top of page

©2024 coliss