Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WebフロントエンドAdvent Calendar 2024

Day 17

position stickyでHTML要素を画面にとどまらせる

Posted at

HTML要素を画面に張り付かせる

小さなダイアログやヘッダー、広告といった、スクロールをしても画面の特定の位置に表示しておきたい要素がでてくることがあります。

JavaScript による実装で位置を固定しておくことも可能ですが、CSSのposition: stickyを利用すると、要素を画面の特定の位置に表示しておく粘着動作を簡潔に実現することが可能です。

position: sticky

position: stickyは要素を粘着させるCSSプロパティです。
スクロールを行った際に、要素を特定の箇所にとどまらせることができます。

position: stickyによって、粘着をさせるには、topbottomleftrightといった、いわゆるinsetプロパティも一緒に指定する必要があります。
insetプロパティが1つも指定されていない時には、position: relativeとして扱われ、粘着動作は起こらなくなります。

粘着先の要素の決まり方

position:stickyが指定された要素は、その祖先要素のうちoverflow: visible(デフォルト値)以外の値をもつ最も近いものに粘着します。
そのため、画面全体のスクロールに粘着させるには、各祖先要素がoverflow: visibleを持たないことが必要になります。

overflow-x: scrolloverflow-x:hiddenなど、横軸への指定であってもその祖先要素へ粘着することとなる点には注意が必要です。

JavaScript での実装

position: stickyは、祖先要素のoverflowプロパティによっては画面全体に粘着させられないため、祖先要素のoverflowプロパティを変更したくない場合には別の方法で粘着動作を実現する必要が出てきます。

スクロールに応じて要素の位置を変更する方法の一つとして、JavaScriptでscrollイベントを監視し、位置を更新する方法があります。
getClientBoundingRect1document.body.scrollTopなどを使用して位置を計算し、要素のstyle属性を使って位置を指定して実現します。

しかし、getClientBoundingRectを使用すると、ページ上の要素の正確な位置とサイズを計算する必要があるため、強制リフロー2が発生する点には注意が必要です。

強制リフローによるパフォーマンスの低下を回避するには、デバウンスやスロットリングによって頻度を落とす方法のほか、Intersection ObserverAPI を利用する方法もあります。

Intersection Observerはスクロールなどのイベントではなく、要素が画面に表示されているかを監視できるため、スクロールイベントを監視するよりもパフォーマンスの点で優れます。

  1. getClientBoundingRectは、ビューポートの上端から要素の上端までの距離やビューポートの左端から要素の右端までの距離を返すElementのメソッドです。

  2. ブラウザが要素の位置やサイズを再計算し、画面上のレイアウトを即座に再構成すること。Forced Synchronous Layout とも呼ばれます。ブラウザの通常の最適化サイクルを中断して強制的に行われるためパフォーマンスに悪影響をあたえます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?