Help us understand the problem. What is going on with this article?

IEで position: sticky っぽい動作をさせる

More than 1 year has passed since last update.

やりたいこと

  • position: sticky のような、ある程度スクロールしたらヘッダが画面に追従するようなことをしたい
  • 非常に遺憾ながらIE11に対応する必要がある

試したこと(ダメだったパターン)

https://codepen.io/lc-shimazaki/pen/XLXxEX
ある程度のスクロール位置に届いた後、JSで対象オブジェクトを position: fixed にする。
しかし、この場合は何故か画面がガタつくような現象が発生。
よくよく見てみると、fixedにした瞬間に対象オブジェクトに依存するオブジェクトが上にずれていた。
絶対位置のオブジェクトにすることで、依存オブジェクトの座標ズレが発生するぽい。

改善策

https://codepen.io/lc-shimazaki/pen/LKGJXV
依存オブジェクトの座標ズレが発生しないようにダミーオブジェクトを配置すればスムーズにstickyっぽい動作になる。

細かく書いた方が良さそうだけど、コード量も短いし全部CodePenにまとめました。
しかし調べるとIE11で position:sticky が使えるようなライブラリもあるっぽいのでそっち使うのがいいのかな…。
うんこみたいなCSSの書き方なのでご指摘いただけるとありがたいです。

lc-shimazaki
Oracle -> Hadoop -> データマネジメントあたりをやっていた雰囲気で乗り切る系インフラエンジニアです。
lightcafe_gr
全国にグループ会社を持つIT企業です
https://www.lightcafe.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away