Sticky Header Using Intersection Observer

交差オブザーバー API (Intersection Observer API) は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供する。


従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向があった。ウェブが成熟していくにつれて、このような情報の必要性は高まってきた。

以前は、要素同士の交差の検出を実装するには、イベントハンドラーやループで Element.getBoundingClientRect() などのメソッドを呼び出し、影響を受けるすべての要素について必要な情報を蓄積していた。このコードはすべてメインスレッドで実行されるため、これらのうち 1 つでもあればパフォーマンスの問題を引き起こす可能性がある。サイトでこのような検出が大量に行われると、まったく醜くなる可能性がある。