知ってると便利！3分でわかる！position: sticky;の使い方

公開日：2022.04.17

ツイートする

この記事は３分で読めます！

目次

こんな表現に使えます！

position: sticky;を使うと、使われた要素をを指定した位置に固定することができます。
よくさまざまなサイトでヘッダーやフッター、サイドバーなどが、上下にスクロールしても固定されているのを見かけます。

従来だとposition: fixed;を使用して、要素が被らないように直下の要素に余白を入れなければならなかったですが、その手間が省けます。

早速コードを見ながら解説いたします。

※IEは対応していませんが、polyfillを使うと使用できるのでその方法も載せています。

コードの書き方

ヘッダーやフッターを固定する

まずは、ヘッダーとフッターを固定したパターンです。

See the Pen position: sticky;<2> by だいすけ@Web制作頑張るパパ (@mdmmmk1123) on CodePen.

見出しを規定の位置で固定する

ヘッダーとフッターを固定＋規定の高さにきたときに固定する方法です。

See the Pen position: sticky;<2> by だいすけ@Web制作頑張るパパ (@mdmmmk1123) on CodePen.

コードの解説

ヘッダーやフッターを固定する

header {
	position: sticky;
	top: 0;
}

footer {
	position: sticky;
	bottom: 0;
}

固定したい要素にposition: sticky;をつけます。
topもしくはbottomで画面上のどの位置で要素を止めるのかを決めます。
フッターに関しては画面の一番下で固定されますが、すぐ下にコピーライトのdivが存在するのでその要素がスクロールされるタイミングで固定は解除されます。
これにより、固定しつつ表示を邪魔しないようにできます。

見出しを規定の位置で固定する

h2 {
  position: sticky;
  top: 110px;/*ヘッダーの高さの終わりから固定させるため*/
  z-index: 50;/*重なり順をヘッダーより下にする*/
  margin: 0;
}

header {
  z-index: 100;/*重なり順を見出しより上にする*/
}

見出しの箇所にもposition: sticky;をつけますが、要素がスクロールする際に、headerの上に重なってしまうので、headerとh2にz-indexで重なりの順番を決めてあげると解消されます。今回はヘッダーは常に表示されている状態にしたいのでh2よりz-indexの値を小さくしています。

polyfillを使う場合

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
/*上記のcdnより下に記載*/
<script>
  var elements = document.querySelectorAll(".クラス名");
  Stickyfill.add(elements);
</script>

<script>
  var elements = $('.クラス名');
  Stickyfill.add(elements);
</script>

これにより、IE11でも使用することができます。
※表の見出しだけは固定できませんが、表示そのものは崩れません。

要素の固定表示に便利なposition: sticky;是非使ってみてください！