【CSS】position:stickyをIEでも使えるようにする方法

後輩ちゃん

先輩！今日は何を教えてくれるんですか？

先輩くん

今日は、CSSのposition:stickyをIE(Internet Explorer)でも使えるようにする方法を教えるよ！

後輩ちゃん

よろしくお願いします！

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

• HTMLとCSSの基本が体系的に学べる
• Webデザインの基本が学べる
• 1つのWebサイトを作りながら学べる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

楽天ブックス

¥2,486 （2024/04/21 17:15時点 | 楽天市場調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

• 美しいコードが書けるが自然と書けるようになる
• 他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

楽天市場で探す

Yahoo!ショッピングで探す

ポチップ

position:stickyはIEに非対応

先輩くん

下記のテーブル表にposition:stickyの互換性についてブラウザ別にまとめたのでご覧ください

後輩ちゃん

position:stickyはIEに非対応だから、表示がされないんですね！

先輩くん

その通り！でもIEが非対応だから絶対に使えないわけではなくて、IEでposition:stickyを使えるようにする方法はあるから、その方法について解説するね

stickyfill.min.jsを読み込ませよう

stickyfill.min.jsは、position:stickyが対応していないブラウザでも要素間でのスクロール追従ができるようになるポリフィルです。

stickyfill.min.jsの使い方

まず初めに、CDNで提供されているstickyfill.min.jsを</body>の直前に追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>

続いて、以下のスクリプトを記述します。

document.querySelectorAllで取得しているクラス名はposition:stickyを使用しているクラスに変更してください。

// JavaScript
<script>
  var elem = document.querySelectorAll(".使用しているクラス名");
  Stickyfill.add(elem);
</script>

// jQuery
<script>
  var elem = $('.使用しているクラス名');
  Stickyfill.add(elem);
</script>

このコードは先ほど読み込ませたstickyfill.min.jsより下に必ず記述してください。

まとめ

今回の記事では、position:stickyをIEでも使えるようにする方法について解説しました。最後にポイントを軽くおさらいしましょう。