こんにちは WIING WSCスタッフです。
position属性のstickyとはスクロール中に要素を
固定したい時に使うプロパティです。
指定の位置に来た時に要素を固定することができます。
sticky(スティッキー)にはベタベタとか、ねばねばとか
粘着性のあるという意味があるので、その意味の通り
指定した位置にペタッと粘着する、 貼り付く、固定される
という感じでしょうか。
position(ポジション)は「位置」という意味です。
position属性のsticky は便利な機能として多く利用されますが
その一方で動かないという問題もあります。
今回はstickyが動かない時についての考察からはじまり
プロパティpositionの説明やstickyの用途や使用頻度に
ついての考察の記事となります。
stickyが動かないという状況の解決策を見つけるためには
実際に自身で試行錯誤してみる必要があることなどについて
わかりやすく説明しています。
CSSのposition属性stickyが効かない理由
position属性stickyは簡単に動かなかった
結論としてstickyが動作しなかった場合の考察から説明しています。
要素の追従を実現するために利用されるposition属性のstickyは、多くの場合便利な機能として活用されていますが、その反面、動かないという問題もあります。具体的には、以下の点が挙げられます。
まず、参考にした解説ページでは、stickyが3行で動くと記載されていたものの実際には全く動かないことがあります。このような状況では、その解決策を見つけるためには、実際に自身で試行錯誤してみる必要があります。