HTML/CSS

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

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

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

本書情報
著者Mana
発売日2019/3/16
ページ数280ページ
Kindle版
レビュー
(Amazon)
(2,167件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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