Intersection Observer を使って要素が画面外に出たら代替要素を表示する

概要

3カラム構成のページで各カラムの長さが違う場合に、例えば左カラムが画面外に出たら空いた部分に代替要素(ナビゲーションや back to top など)を出したいので Intersection Observer を使って実現できないか試した記録

できたもの

- 左カラムが画面外に出たかどうかを監視して、代替要素を表示するようにした - 代替要素は sticky にしてスクロールに追従するようにしてみた - ついでに同じイベント拾ってヘッダも追従モードに切り替わるようにしてみた