【Vanilla JS】ページ上部から一定量スクロールした際にヘッダーのスタイルを変更する処理（Intersection Observer API使用）

概要

用途・要件

• ページ上部から一定量スクロールしたタイミングでヘッダーにクラスを付与して、高さなどのスタイルを変更する。
• スクロールイベントを使用せず、Intersection Observer APIを使用。（ブラウザの負荷軽減）
• 閾値を調整するための要素を追加。
• 閾値はCSSで調整。(DEMOでは300pxスクロールすると表示する設定)
• CSSのtransitionでアニメーションを設定。（任意）

注意事項

• IE11はIntersection Observer API非対応のため、Polyfillが必要です。
• Intersection Observer API 対応ブラウザはこちら。（Can I Use）

検証ブラウザ

• Google Chrome(最新)
• Safari(最新)
• Firefox(最新)
• Microsoft Edge(最新)
• IE11 (※Polyfillが必要です)

実装