2022年9月アーカイブ

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

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


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

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

position: sticky;
top: 0;

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


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

このアーカイブについて

このページには、2022年9月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2022年8月です。

次のアーカイブは2023年1月です。

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