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

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を基準に固定される位置が決まります。
(親要素のheightを超えたら、固定が解除される)
そのため、親要素にheightを指定しないと、そもそも有効になりません。
これ、結構ハマりやすいので、もし position: sticky; が動かない場合、見直すと良いかもしれません。

親要素にoverflowが設定されていないこと

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

この記事のまとめ

今回は、
IE11のサポート期限が完全に満了する期日が近づいている(2022年6月15日)ことに伴い、
実際の制作現場でも普通に使用できる状況になるであろうcssプロパティのひとつ、
position: sticky; について書きました。

以前書いた details と summary もそうですが、
今後、使用されるケースが増えてくると思われる
新しいタグ、新しいプロパティが数多くあります。(display: grid や object-fit なんかもそうですよね)

私自身も、引き続き実際にそれらを試しつつ
良いサンプルを思い付いたら、また記事を書いていきたいと思っています。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。