目次
position: stickyが効かない、IE11対応
結論
・親要素全てのoverflow属性値をvisibleに変更する
・IE11はそもそも「position: sticky」が効かないのでstickyfill.jsのライブラリを使用
・IE11はそもそも「position: sticky」が効かないのでstickyfill.jsのライブラリを使用
position: stickyが効かない場合の解決方法【CSS】 – termina.ioを参照した。
親要素全てのoverflow属性値をvisibleに変更する。
この状態になっているかどうか？はディベロッパーツールのコンソールを開き
$(".stickyをつけた要素").parents().css("overflow", "visible")；
を入力する。
確認用にstickyの要素に背景色をつけておくと視認しやすくなる。
stickyを設定した要素より上のoverflow属性値をvisibleに変えていく必要があるのだが、めんどくさい場合にはjQueryで代用。
この手法でstickyが効くようになった場合にはそのまま「$(“.stickyをつけた要素”).parents().css(“overflow”, “visible”)；」をページ内に入れる。
IE11対応
そもそもIEはstickyに対応していない。
IE11にstickyを適応させるには、GitHub – wilddeer/stickyfill: Polyfill for CSS position: stickyよりダウンロードしたstickyfill.jsを読み込み、下記スクリプトを記述する。
Stickyfill.add(document.querySelectorAll('.stickyをつける要素'));
CSSの勉強をするのに最適なおすすめ書籍の紹介
created by Rinker
¥2,948
(2023/09/14 22:46:31時点 Amazon調べ-詳細)
コメント