【CSS】position stickyの基本的な使い方を押さえよう

CSSのposition stickyの使い方を理解しよう！

position: sticky;を利用すれば、JavaScriptを使用しなくても要素の絶対位置指定が可能です。
（直感的に理解しやすいので「絶対位置指定」と説明していますが、正確には「粘着位置指定」です）

Polyfillを利用することで、IEにもカンタンに対応することができます。
ただし、一部対応していないケースもあるので注意が必要です。
のちほど解説いたします。

stickyが適用された要素を「粘着位置指定要素」と呼びます。
私的イメージですが、粘着位置指定要素は「忍者」です。

【基本のコード】CSS position stickyの使い方

HTML

<div class="sticky-item">
    <h1 class="title-01">CSS Sticky</h1>
</div>

CSS

.sticky-item{
  position: -webkit-sticky; /* Google Chrome、Safariに対応 */
  position: sticky;
  top: 50px; /* 位置を指定しないと固定されないので、位置は絶対に指定しましょう */
}

Polyfill

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js" integrity="sha512-dmLpQXesGDP0ZM/s8zGKQU3Xlbix57QfwFNFh+BY5Ad/afObQ/lBo200mHWuHu8LOoI7tlK09yP3L/4DjdQ5Xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

JavaScript

const stickyItem = document.querySelectorAll('.sticky-item');
Stickyfill.add(stickyItem);

【Point】CSS position stickyの使い方

固定させたい要素にposition: -webkit-sticky;とposition: sticky;を指定する
stickyが適用された要素を「粘着位置指定要素」を呼ぶ
topプロパティなどで位置を指定しないと要素が粘着されない
位置は、top、right、bottom、leftで指定する
PolyfillでIE対応ができる（一部できないケースもアリ）

【Demo】CSS position stickyの使い方

position stickyデモはこちら

【解説】CSS position stickyの使い方

まずは固定したい要素にCSSを設定する

固定させたい要素にposition: -webkit-sticky;とposition: sticky;を設定します。

HTML

<div class="sticky-item">
    <h1 class="title-01">CSS Sticky</h1>
</div>

CSS

.sticky-item{
  position: -webkit-sticky; /* Google Chrome、Safariに対応 */
  position: sticky;
}

位置を指定しないと、粘着機能が発火しない

要素を粘着させるにはposition: -webkit-sticky;とposition: sticky;を指定するだけではいけません。

top、right、bottom、leftなどで位置を指定する必要があります。

.sticky-item{
  position: -webkit-sticky;
  position: sticky;
  top: 50px; /* 位置を指定しないと固定されないので、位置は絶対に指定しましょう */
}

というのも、stickyが適用された要素は以下のような挙動をするからです。

粘着位置指定要素stickily positioned elementとは、 position の計算値が sticky である要素です。これは包含ブロックがフロールート (又はその中でスクロールするコンテナー) 内の指定されたしきい値 (例えば top に設定された auto 以外の値など) を達するまでは相対的な配置として扱われ、包含ブロックの反対の端が来るまでその位置に「粘着」するものとして扱われます。
position – CSS: カスケーディングスタイルシート | MDN

MDNさんから引用させていただきました。

まず、stickyが指定された要素を「粘着位置指定要素」と呼びます。
そして「包含ブロック」とは、「粘着位置指定要素から見て直近の親ブロック要素」のことです。

仕様について難しく書いてありますがつまりは、

粘着位置指定要素はtopなどで指定された位置にくると粘着が始まる
直近の親ブロック要素の底と粘着位置指定要素の底が重なるタイミングで粘着が解除される

ということです。
デモページで確認していただくとわかりやすいと思います。

この動き、忍者みたいじゃないですか？

「危険を察知すると壁にべったりと張り付いてやりすごし、
危機が去ると壁に張り付くのをやめる」

「指定した位置にくると粘着がはじまり、
親ブロック要素の底までくると粘着をやめる」

どうでしょう？少しはイメージしやすいでしょうか？

Polyfillを利用するとIEにも対応できるが、対応できないケースもあるので注意が必要

stickyはPolyfillを利用することでIEへの対応が可能です。

PolyfillはCDNで読み込んでも、
Gitからソースを落としてきて外部ファイルとして読み込んでも構いません。

やりやすい方で読み込んでください。

CDN：stickyfill – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developers
Git：GitHub – wilddeer/stickyfill: Polyfill for CSS `position: sticky`

Gitの手順

Gitのページにアクセスしてファイルをダウンロードする。
ダウンロードしたファイルの「dist」フォルダに格納されているうち、下記のどちらかを使用する。
・stickyfill.min.js
・stickyfill.js

CDNの手順

CDNのページにアクセスして、URL横の「Copy Script Tag」アイコンをクリックする。
コードをコピペする。

<!-- 2021年7月17日時点での最新バージョン -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js" integrity="sha512-dmLpQXesGDP0ZM/s8zGKQU3Xlbix57QfwFNFh+BY5Ad/afObQ/lBo200mHWuHu8LOoI7tlK09yP3L/4DjdQ5Xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

ここまででPolyfillの読み込みが完了しました。
あとはJavaScriptのコードを書いて、Polyfillを有効化しましょう。

const stickyItem = document.querySelectorAll('.sticky-item'); //粘着位置指定要素に指定しているクラス名を設定してください
Stickyfill.add(stickyItem);

querySelectorAllメソッドでstickyを適用する要素を取得して、
それをStickyfill.addメソッドの引数に渡して実行します。

これでPolyfillが適用されます。
コピペで問題無し！カンタンですね！

Polyfillでも対応できないケース

Polyfillを利用してIEに対応する流れを説明してきましたが、
いくつか対応できないケースが存在します。

【ケース1】tableのタイトルを固定するケース

こちらのケースは以下の記事で言及されていました。

【IE11にも対応】position:sticky;の使い方ヘッダー、サイドバー、表の見出し

表の見出し(table要素)だけは､「stickyfill」を使ってもIEに対応させることができませんでした｡
ただ､IEだと表がくずれるというわけではなく､見出しが固定されないだけなので､これが許されるのであれば使うことができます｡

ハシウェブさんの記事から引用させていただきました。

私も検証してみましたが、
tableタグのthタグにstickyを適用した場合、固定機能が無効になりました。

もう一つ、私のほうでtheadタグにstickyを適用するケースを検証してみました。

こちらのケースでは要素が固定されたものの、レイアウト崩れが起こりました。
また固定が解除されるタイミングも他のブラウザと比較すると差がありましたし、なめらかな動きは再現できませんでした。

デモページを作成しましたので、参考としてご覧ください。
（IEで開いてください）

まとめると、IEでテーブルのタイトルを固定するには

tableタグ以外でコーディングせよ！！！

ということになりますね。

単純にdivタグでテーブルレイアウトを作成したデモページも用意いたしました。
参考としてご覧ください。
（IEで開いてください）

【ケース2】bottomで位置を指定した要素は固定されない

デモページ作成中に、IEでフッターが固定されていないことを発見！
こちらのケースも検証してみました。

フッターをページの一番下に粘着させる場合、基本的にはbottomプロパティに0を指定すると思います。

.sticky-item{
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

IE以外のブラウザでは、上記指定で問題なくウインドウの下部に粘着されます。
ただし、IEでは固定されませんでした。
デモページからご確認ください。
（IEで開いてください）

対策としては、position: fixed;を使用して絶対位置指定するほかないでしょう。
ここは受け入れて、stickyを使用しない方向で対応するのが賢明です。

【まとめ】CSS position stickyの使い方

IEでは多少難アリですが、

tableのセルにstickyを使わない
ウィンドウの下部に固定する要素は、従来通りposition: fixed;を使う

という点に気をつければ使い勝手のよい機能ではないでしょうか？

この記事を書くまで私も敬遠していましたが、
今後はどんどん利用していこうと思います。
IEに対応しなくていい案件も増えてきましたしね。

以上です！
少しでもお役にたてれば幸いです。

【CSS】position stickyの基本的な使い方を押さえよう

目次

CSSのposition stickyの使い方を理解しよう！

【基本のコード】CSS position stickyの使い方

HTML

CSS

Polyfill

【Point】CSS position stickyの使い方

【Demo】CSS position stickyの使い方

【解説】CSS position stickyの使い方

まずは固定したい要素にCSSを設定する

HTML

CSS

位置を指定しないと、粘着機能が発火しない

Polyfillを利用するとIEにも対応できるが、対応できないケースもあるので注意が必要

Gitの手順

CDNの手順

Polyfillでも対応できないケース

【ケース1】tableのタイトルを固定するケース

【ケース2】bottomで位置を指定した要素は固定されない

【まとめ】CSS position stickyの使い方

Comments

コメントを残すコメントをキャンセル

【CSS】position stickyの基本的な使い方を押さえよう

目次

CSSのposition stickyの使い方を理解しよう！

【基本のコード】CSS position stickyの使い方

HTML

CSS

Polyfill

【Point】CSS position stickyの使い方

【Demo】CSS position stickyの使い方

【解説】CSS position stickyの使い方

まずは固定したい要素にCSSを設定する

HTML

CSS

位置を指定しないと、粘着機能が発火しない

Polyfillを利用するとIEにも対応できるが、対応できないケースもあるので注意が必要

Gitの手順

CDNの手順

Polyfillでも対応できないケース

【ケース1】tableのタイトルを固定するケース

【ケース2】bottomで位置を指定した要素は固定されない

【まとめ】CSS position stickyの使い方

Share

Comments

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル