CSSの「position: sticky」を使うことで、特定の範囲内で要素を追従させることができます。
JavaScriptで複雑な処理を書くことなく追随ナビなどを実装できます。
2022年の9月現在、モダンブラウザではサポートされています。
●使い方
使い方は簡単で、追従させたい要素（デモの黄色の要素）に以下のスタイルを当てます。
position: sticky;
top: 0;
top は追従する際の上部からの位置です。
20pxなど指定すると画面上部からその数値分空けた状態で追随します。
●注意点
・position: sticky を当てた要素は、その要素の親要素の範囲内で追随します。そのため、親要素のほうが高くないと追随しません。
親要素に高さを指定するか、同じ親要素内に高さのある別の要素が必要です。
・top も指定しないと追随しません。
・親要素、または祖先要素にoverflow: hidden を指定していると追随しません。
コメントする