<h3>概要</h3>
<p>3カラム構成のページで各カラムの長さが違う場合に、例えば左カラムが画面外に出たら空いた部分に代替要素(ナビゲーションや back to top など)を出したいので <a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> を使って実現できないか試した記録</p>
<h3>できたもの</h3>
<iframe height="300" style="width: 100%;" scrolling="no" title="Intersection Observer sample" src="https://codepen.io/o-hayato/embed/YzvJYbO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen>
  See the Pen &#x3C;a href="https://codepen.io/o-hayato/pen/YzvJYbO">
  Intersection Observer sample&#x3C;/a> by o-hayato (&#x3C;a href="https://codepen.io/o-hayato">@o-hayato&#x3C;/a>)
  on &#x3C;a href="https://codepen.io">CodePen&#x3C;/a>.
</iframe>
- 左カラムが画面外に出たかどうかを監視して、代替要素を表示するようにした
- 代替要素は sticky にしてスクロールに追従するようにしてみた
- ついでに同じイベント拾ってヘッダも追従モードに切り替わるようにしてみた

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

概要

できたもの