後輩ちゃん
先輩!今日は何を教えてくれるんですか?
先輩くん
今日は、CSSのposition:stickyをIE(Internet Explorer)でも使えるようにする方法を教えるよ!
後輩ちゃん
よろしくお願いします!
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
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を読み込ませる必要がある