CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

IntersectionObserverを使って要素がCSSのposition:stickyで固定されるタイミングを検出する方法

position: stickyが適用された要素は、スクロールに応じて固定されますが、そのタイミングをJavaScriptで直接取得するAPIは存在しません。そこで便利なのがIntersectionObserver（交差オブザーバー）です。スティッキー要素にさまざまなCSSスタイルを組み合わせることで、要素が固定された瞬間を簡単に検出できます。

仕組みのポイント

このテクニックでは、スティッキー要素の直前に配置した小さな「監視用」要素をIntersectionObserverで監視します。ページをスクロールしてスティッキー要素が画面上部に固定されると、監視用要素は完全にビューポート外に出るため、intersectionRatioが0になります。逆に元の位置に戻れば1に戻ります。この変化をトリガーにCSSクラスを付け替えることで、固定状態に応じたスタイルの切り替えが可能です。

サンプルコード

以下の例では、ナビゲーションバーが固定されたときに影の色とフォントサイズが変化します。

<!DOCTYPE html>
<html>
<head>
<style>
#first {
   background-color: lightgrey;
   height: 10px;
}
#navbar-top {
   background-color: lightgrey;
   height: 2px;
}
#container {
   position: sticky;
   top: 0;
   box-shadow: inset 0 0 25px navy;
   height: 55px;
   text-align: center;
   font-size: 24px;
   line-height: 55px;
   font-weight: bold;
   transition: font-size 0.4s ease-in;
}
.sticky-navbar {
   box-shadow: inset 0 0 15px orange!important;
   font-size: 20px !important;
}
#parent-container {
   background-color: aliceblue;
   height: 3300px;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="navbar-top"></div>
<div id="container">Watch Me!</div>
<div id="parent-container"></div>
<script>
let newObserver = new IntersectionObserver(function(entries) {
   if(entries[0].intersectionRatio === 0)
      document.querySelector("#container").classList.add("sticky-navbar");
   else if(entries[0].intersectionRatio === 1)
      document.querySelector("#container").classList.remove("sticky-navbar");
}, { threshold: [0,1] });
newObserver.observe(document.querySelector("#navbar-top"));
</script>
</body>
</html>

コードの解説

  • threshold: [0, 1] — 交差率が0%（完全に見えない）と100%（完全に見えている）の2つの状態を監視します。
  • intersectionRatio === 0 — 監視要素が見えなくなった＝スティッキー要素が固定された状態なので、sticky-navbarクラスを追加します。
  • intersectionRatio === 1 — 監視要素が再び完全に表示された＝固定が解除されたので、クラスを削除します。
  • transitionプロパティ — フォントサイズの変化に0.4秒のイージングをかけることで、滑らかなアニメーションを実現しています。

実行結果

このコードを実行し、ページを下にスクロールすると、ナビゲーションバーが画面上部に固定された瞬間にスタイルが切り替わります。上の画像は固定前、下の画像は固定後の状態です。

IntersectionObserverを使って要素がCSSのposition:stickyで固定されるタイミングを検出する方法

IntersectionObserverを使って要素がCSSのposition:stickyで固定されるタイミングを検出する方法

この手法を使えば、スクロールイベントを頻繁に発生させることなくパフォーマンス良くスティッキー状態を検出できるため、ヘッダーの縮小やナビゲーションの強調表示など、さまざまなUIに応用できます。

  1. CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説

    CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "

  2. CSSで固定フッター（スティッキーフッター）を作成する方法

    CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&