CSSの「position: sticky」で要素を追従

| コメント(0)
CSSの「position: sticky」を使うことで、特定の範囲内で要素を追従させることができます。
JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。


2022年の9月現在、モダンブラウザではサポートされています。

使い方
使い方は簡単で、追従させたい要素(デモの黄色の要素)に以下のスタイルを当てます。

position: sticky;
top: 0;

top は追従する際の上部からの位置です。
20pxなど指定すると画面上部からその数値分空けた状態で追随します。


注意点
・position: sticky を当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。
親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。
・top も指定しないと追随しません。

コメントする

このブログ記事について

このページは、gravity-worksが2022年9月30日 19:13に書いたブログ記事です。

ひとつ前のブログ記事は「スムーススクロールさせるCSS」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。