sticky とは
position プロパティに sticky と設定することで、要素がスティッキーアイテムとなり、ステッキーアイテムをラップしている要素がスティッキーコンテナとなります。
スティッキーコンテナが、スティキーアイテムがフロートすることができる最大のエリアになります。また、top/bottom の値がステッキーコンテナからの相対距離で停止する値になります。
sticky と flex-box (position:flex) との相性はとても良くて、次のように２コラムの右コラムをスクロールにあわせて固定することなどできます。
See the Pen
sticky1 by PlusOne (@pluseone)
on CodePen.
同一スティッキーコンテナに、複数のスティキーアイテムを設定
最初にフローして固定され要素の上に、フローして固定されていく。
bottomを設定すると、固定したフッターとして利用できる
sticky が動作しない原因と対応方法
②スティッキーコンテナに「overflow:hidden」が設定されている
toverflow:hiddenを解除してください
不具合例
See the Pen
sticky06 by PlusOne (@pluseone)
on CodePen.
スティッキーコンテナに「overflow:scroll」を設定すると、スティッキーコンテナのスクロール時にstickyが動作する
See the Pen
sticky07 by PlusOne (@pluseone)
on CodePen.