position: sticky; を使って、cssだけで要素を追従させる方法

先日は、比較的新しいhtml要素である
details と summary を使った、アコーディオン型コンテンツの作成例の記事を書きました。
[該当記事]：
detailsタグとsummaryタグでアコーディオン型コンテンツを作る方法[ジェネレーターあり]

これらのたぐいの、新しいhtml要素や新しいcssプロパティというのは、
IE11をはじめとするブラウザの対応状況が十分でなく、
ここ数年では、実制作案件で採用することにハードルが高かった感があります。
（もし採用するにしても、別途、動作を補完するjsライブラリ、いわゆるポリフィルが必要だったりしました）

しかし2021年も残すところ2ヶ月と少しとなった現在では、

ついに各ブラウザの対応状況も改善してきており、
これらの新しいhtml要素や新しいcssプロパティも、実制作での採用を検討しても良さそうな雰囲気になってきました。

そんなわけで今回は、おそらく実際の案件でも今後
使うケースが出てくるであろうcssプロパティ、
position: sticky; について書きたいと思います。

上に書いた、新しいhtml要素や新しいcssプロパティの話と同じ文脈で語ることのできる、
IE11のサポート期限が完全に満了する期日が近づいている（2022年6月15日）ことに伴い、
実際の制作現場でも投入できるであろうcssプロパティのひとつ、です。

`position: sticky;` で何ができるか

ざっくりいうと、

「その要素が存在する場所を」
「画面のスクロール位置が通り過ぎたら」
「その要素を追従させることができる」

というものになります。

以下にサンプルをご用意しましたので、このサンプルを見ると、どういったことができるのかよくわかるかと思います。

実際に position: sticky; が動いているサンプルを作成してあります。
次のリンクより、確認することができます。
position: sticky;のサンプル

↑このサンプルの様に、たとえば長い文章が存在するページで、
各章のタイトルを通り過ぎたらタイトルを追従させて、いまどこを読んでいるのか？
というのをわかりやすくしたり、

または単純に、
（良いかどうかは別として）
なつかしの、スクロールに追従するメニューなんかも、簡単に実装できると思います。

スクロールに伴う要素の追従を、jsを介さずに実現できる点が
使いやすいところかと思います。

コードをご紹介

position: sticky; を適用するコードは、以下の様になります。
本文は長いので(サンプルページでは、一般的な例文としてよく使用される、 Lorem ipsum を入れています)
省略していますが、
こちらのコードで、先ほどのサンプルページのような挙動になります。

[html]

<section>
  <div class="container-sticky">
    <h2 class="heading-sticky">章01のタイトル</h2>
    <p>章01の内容。章01の内容。章01の内容。（長いので省略）</p>
  </div>

  <div class="container-sticky">
    <h2 class="heading-sticky">章02のタイトル</h2>
    <p>章02の内容。章02の内容。章02の内容。（長いので省略）</p>
  </div>

  <div class="container-sticky">
    <h2 class="heading-sticky">章03のタイトル</h2>
    <p>章03の内容。章03の内容。章03の内容。（長いので省略）</p>
  </div>
</section>

[css側]

.container-sticky {
  height: auto;
  width: 100%;
}
.heading-sticky {
  background: rgba(255, 255, 255, .9);
  border: 8px solid #ebebeb;
  margin: 40px 0;
  padding: 1rem;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
}

ハマりやすそうな点など

この position: sticky; ですが、いくつかハマりやすそうな点があると感じたので、以下に書いておきます。

親要素にheightを指定すること

position: sticky; は、親要素のheight(横方向の固定の場合はwidth)を基準に固定される位置が決まります。
（親要素のheight, または横方向の場合はwidthを超えたら、固定が解除される）
そのため、親要素にheight(横方向の固定の場合はwidth)を指定しないと、そもそも有効になりません。
これ、結構ハマりやすいので、もし position: sticky; が動かない場合、見直すと良いかもしれません。

top, leftが指定されていること

position: sticky; が指定された要素が固定される位置は、top, left 等の「位置指定」によって決まります。
そのため、top, left 等の「位置指定」をしておかないと、適用されません。
こちらも結構、スルーしてしまいがちな点ですので、もし position: sticky; が動かない場合、確認すべき点です。

親要素にoverflowが設定されているかどうか

position: sticky; は、親要素にoverflowが指定されていると動作しません。
これも結構ハマりやすいので、もし position: sticky; が動かない場合、見直すと良いと思います。
Mozillaが運営している MDNの解説を見ると、一見 overflow の指定がないと動かない、とも取れる説明文が書かれているのですが、よく読むと実際はそうではないことがわかります。
↑この条件については後日リライト予定です。