HTML/CSS

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

後輩ちゃん
後輩ちゃん
先輩!今日は何を教えてくれるんですか?
先輩くん
先輩くん
今日は、CSSのposition:stickyをIE(Internet Explorer)でも使えるようにする方法を教えるよ!
後輩ちゃん
後輩ちゃん
よろしくお願いします!

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

position:stickyはIEに非対応

先輩くん
先輩くん
下記のテーブル表にposition:stickyの互換性についてブラウザ別にまとめたのでご覧ください
デバイス ブラウザ サポート
Chrome 56
Edge 16
FireFox 32
Internet Explorer 非対応
Opera 43
Safari 13
WebView Android 56
Chrome Android 56
FireFox for Android 32
Opera Android 43
Safari on iOS 13
Samsung Internet 6.0
後輩ちゃん
後輩ちゃん
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でも使えるようにする方法について解説しました。
最後にポイントを軽くおさらいしましょう。

ポイント

  • IEで正常に動作しない原因は、position:stickyがIEに対応していないため
  • IEに対応させるためには、stickyfill.min.jsを読み込ませる必要がある

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村