後輩ちゃん
先輩！今日は何を教えてくれるんですか？
先輩くん
今日は、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を読み込ませる必要がある
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
