HTML/CSS

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

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

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

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

動画情報
作成者たにぐち まこと
学習時間9時間
受講者数43,706人
レビュー (9,232件)
動画の詳細はこちら

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アクセスランキング にほんブログ村