CSS

position: stickyが効かない、IE11対応

スポンサードリンク
スポンサードリンク

position: stickyが効かない、IE11対応

結論

・親要素全てのoverflow属性値をvisibleに変更する
・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,838 (2022/07/26 13:53:51時点 Amazon調べ-詳細)


WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-CSS
-,

© 2022 さくらいらぼWEB制作版