Sticky Header Using Intersection Observer

交差オブザーバー API 「Intersection (要素間交差） Observer (監視) API」は、ターゲットとなる要素が、祖先要素または文書の最上位のビューポートと交差する変化を非同期的に監視する方法を提供する。このページでは監視対象を 'hr' とする。スクロールしてこの区切り線と出現してくるヘッダーの動きに注視していただきたい。

HTML の <hr> タグは、段落レベルの要素間でテーマの意味的な区切りを表す要素である。

JavaScript の記述にて、「document の querySelector('hr')」メソッドは、指定されたセレクター'hr' に一致する、文書内の最初の Element を取得するように指示している。「ob.observe(hr);」の設定により、監視する対象要素の 'hr' の監視を開始させる。

ビューポートと「hr」が交差すると、「<div class="sticky-header">」の「class」に「visible」を付け加えるとヘッダーを表示する(表示になったときの状態)、交差から外れるとこれを削除しヘッダーは非表示になる。

以下は Intersection Observer API を利用できるようにする JavaScript の記述である。

< script >
"use strict";
const hr = document.querySelector('hr');
const sticky = document.querySelector('.sticky-header');
const ob = new IntersectionObserver(obCallback);

function obCallback(payload) {
  if (payload[0].boundingClientRect.y < 0) {
  //boundingClientRect.y は、オブジェクトの y 座標を取得する
    sticky.classList.add('visible');
  } else {
    sticky.classList.remove('visible');
  }
}
ob.observe(hr); //observeメソッドで、監視する要素を指定
< /script>

<body>
  <main>
    <header>
      <h1>Sticky Header Using Intersection Observer</h1>
      <div style="height: 200px; width: 100%; background-color: orange;"></div>
    </header>
    <div class="sticky-header">
      <div id="areaA">
        <h2>Sticky Header Using <span style="color: red;">Intersection Observer</span></h2>
      </div>
      <div id="areaB">
        <p>　対応ブラウザ: Chrome、Edge、Safari、Firefox、Opera、Safari on iOS　</p>
      </div>
    </div>
    <section class="content">
      <p>Etc. text…</p>
      <hr>
      <p>Etc. text…</p>
    </section>
  </main>
  <script>
…
  </script>
</body>

.sticky-header.visible {
  display: flex;
  transform: none;
}
.sticky-header.visible p {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  height: 2.2rem;
  line-height: 2.2rem;
  background-color: #265294;
}