Intersection Observer APIを使った固定ヘッダー3パターン

こんにちは、つるみなおや（@tsuruchan_web）です。

Intersection Observer APIを使った固定ヘッダーを3パターン作ったのでご紹介します。

今までは「ある要素までスクロールしたらヘッダーを固定する」という処理を、scrollイベントを使って実装していましたが、スクロールのたびにスクロール量が計算されるので処理が重くなっていました。

Intersection Observer APIは「ある要素が表示画面内にあるかどうか」で処理を行うことができるので、スクロール量に依存せず、今までと同じ実装ができます。

しかも書き方も簡単なのでおすすめです！

今回はファーストビューが画面外にいったらヘッダーに処理を加えています。

コピペ可能なのでよかったら使ってみてください。

Intersection Observer APIを使った固定ヘッダー3パターン

1 一番上に固定

ファーストビューをすぎるとヘッダーが一番上に固定されます。よく見るシンプルな実装です。

See the Pen
固定ヘッダー（途中から固定） by つるみなおや (@trmnaoya)
on CodePen.

2 背景色とサイズを変更

ファーストビューをすぎるとヘッダーの背景色とサイズを変更しています。ファーストビューではヘッダーも大きく目立たせ、コンテンツ部分ではヘッダーを小さくすることでコンテンツが見やすくなります。

See the Pen
固定ヘッダー（途中から色とサイズ変える） by つるみなおや (@trmnaoya)
on CodePen.

3 ヘッダーを変更しつつ固定

ファーストビューをすぎたときにヘッダーを違うものに変更しつつ一番上に固定しています。（今回は背景色しか変えていませんが,,,）背景色、文字色、サイズなどを変えることで、コンテンツ部分ではまた違ったサイトの見え方になると思います。

See the Pen
固定ヘッダー（途中でヘッダー入れ替え） by つるみなおや (@trmnaoya)
on CodePen.

以上3パターンご紹介しました。

Intersection Observer APIは使いやすいのでぜひ使ってみてください！

参考になれば幸いです。