position:sticky;は、jsを使わなくても追従headerを実装できるから便利ですよね。
もともとposition:sticky;で実装していたものに、急遽IE11対応が求められたので、調べたことをまとめました。
position:sticky;のサポート状況
2022年8月の時点でposition:sticky;はIE11をサポートしていません。
そのため、position:sticky;をIE11で使用するには、調整が必要となります。
IE11で使うにはpolifil「stickyfill」が便利
以下の記述を追加してあげることで、IE11でも同様の挙動を実現できます。
※ .stickyは、position:sticky;を設定しているclassが入ります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js"></script>
<script>
var elements = document.querySelectorAll(".sticky");
Stickyfill.add(elements);
</script>
以上です。
最後までお読みいただき、ありがとうございました。