KumaTechLab
2020-11-17/2023-05-23

stickyを検知する方法

stickyを検知する方法

position:stickyを設定した要素がstickey状態を検知する方法を紹介します。

CSSでは検知できないため、javascriptを使用してsticky状態を検知します。

  • sticky状態になった際に特定のCSSを適用したい
  • stickey状態で処理を行いたい

といった際に残念ながらCSSで「:hover」のように「:sticky」とはできません。

そのためjavascriptで処理します。

javascriptでスクロール監視して要素位置を確認すればできます。

ですが、負荷が大きいのであまり導入したくない人も多いのではないでしょうか。

そこで今回は「Intesection Observer(要素間交差監視)」を使用した方法を紹介します。

Intersection Observerを使用したSticky検知方法

使用した完成形が以下のようになります。

「テスト」要素が隠れ、sticky要素が一番上でsticky状態になります。

stickeyになると色が変わり、影が付きます。

HTML

sticky containerが「.container」となり、stickyにする要素を「.sticky」としています。

CSS

.sticky {
  position: sticky;
  top: 0;
}

stickyの基本的な使用方法です。

JS

const select = document.querySelector('.title');
const observer = new window.IntersectionObserver( (entry) => {
  if (!entry[0].isIntersecting) {
    document.querySelector('.sticky').classList.add('hover');
  } else {
    document.querySelector('.sticky').classList.remove('hover');
  }
});
observer.observe(select);

「.title」の要素間交差監視を設定しています。

デフォルトでは交差対象はビューポートとなっています。

isIntersectingには交差していれば「true」、交差していなければ「false」が返却されます。

詳しい使いかたはリファレンスを参考にしてください。

どれぐらい交差した時にどうするかといった設定なども行うことができます。

2020 KumaTechLab.