sticky;を指定することで、要素をスクロールに合わせて固定表示を自由に設定することができます。これだけですと固定表示にできるものの、固定表示になっているかの状態を検知することはできません。APIを使ってスティッキー要素の固定表示の状態を検知する処理を作成してみたいと思います。APIについては当サイトの過去記事でそれぞれ詳しくまとめていますので、こちらもご参考にどうぞ。それぞれの細かい解説やサンプルなどはこちらの記事をご覧いただければと思います。それでは早速サンプルのコードを見ていきます。HTMLでスティッキーのコンテナ要素と実際に固定表示させる要素を用意します。今回はJavaScript側で検知するために、新たに固定表示させる範囲の基準位置に置くガイド要素も作成するのがポイントになります。data-guide="bottom"></span></section>ガイド要素やコンテナ要素は後述するJavaSciptにてDOMで取得する必要があるため、カスタムデータ属性でラベリングしておきます。APIで検知する要素の対象にもなるので、共通のclassを当てておき、ビューポートに入ったことを検知できるようにしておきます。コンテナ要素とスティッキー要素については通常通りの設定を行いますが、ガイド要素の2つはそれぞれスティッキー範囲の上端と下端の位置に配置されるよう絶対位置指定を使って調整します。この場所がビューポートに入ったかどうかでスティッキーの状態を検知できるようになります。//コンテナ要素の下端から、コンテナ要素の内余白とスティッキー要素の高さ、スティッキー要素の固定位置の余白分を足した分だけ上になるように}ガイド要素について、コンテナ要素のpaddingやスティッキーの表示位置と画面の余白などに合わせて調整します。下限位置については、正しい位置になるよう、余白やスティッキー要素の高さを計算して位置を指定します。ガイド要素は念の為見えないようにしておくと良いですね。最後にJavaScriptでビューポートを対象にした検知ができるように処理を作成していきます。変数としてスティッキー要素が固定表示になっているか、そして、コンテナ要素とガイド要素がそれぞれビューポート内で検知されているかどうかのフラグメント用のデータを用意します。これらの値が条件によって切り替わるという感じですね。APIで対象要素を検知していきます。この時に対象要素は「IntersectionObserverEntry」としていろんな情報が格納された配列の形式でデータを得ることができます。このデータをもとにコンテナ要素やガイド要素のDOMの情報を取得し、それぞれの要素に合わせて検知された時の処理を分岐していきます。}});IntersectionObserverEntryでは対象要素のDOMや検知の有無、また表示されている範囲の割合などの情報を下記のように参照することができます。これらを活用することで、より複雑なスクロールに合わせた処理を実現することができます。IntersectionObserverEntry.boundingClientRect対象要素の座標やサイズなどの情報を取得することができますIntersectionObserverEntry.isIntersecting対象要素が検知範囲に入ったかどうかを判定することができますIntersectionObserverEntry.intersectionRect対象要素の検知範囲に入っている領域に相当する矩形の座標やサイズなどの情報を取得することができますIntersectionObserverEntry.intersectionRatioboundingClientRectに対してのintersectionRectの割合を示し、対象要素がどれくらい検知範囲に入っているかがわかりますこれらの情報を参照しながら、スティッキー要素が固定状態になる条件を確認していきます。上限のガイドとコンテナ要素については検知エリアであるビューポートに入っていることが前提になります。下限のガイドについては、画面の上部より外側へ外れた時に状態が切り替わるようになります。そのため、検知のタイミングでDOMのtopの位置がマイナスになった時が対象となります。これらの条件が組み合わさったときに、スティッキー状態のフラグメントを切り替えられるようにスクロールイベントで値を更新されるようにします。場合によってはリサイズイベントも合わせて設定しておいた方が良いかもしれませんね。実際に作成したサンプルはこちらになります。スクロールに合わせてスティッキー要素がコンテナ要素内で固定表示へと切り替わり、その状態に合わせて動的にスタイルが切り替わっていることが確認できます。このような処理は先述のスティッキー要素の固定表示を判別するフラグメント用の変数を使うことで実現できます。APIを使って検知する方法についてまとめてみました。固定表示が可能となるため、上端と下端の両方でトリガーを設定する必要があるというのがポイントになりますね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。