Open hysryt opened 6 years ago
sticky について
部分的 fixed みたいな感じ
表示される位置は、通常のフローに従った表示位置 と オフセットされた表示位置 のいずれかとなる。
どちらの表示位置となるかは 通常のフローに従った表示位置 をもとに計算され、 top
や left
などでの指定によって異なる。
例えば top
を指定した場合、画面のスクロール位置が 通常のフローに従った表示位置 より上の場合はそのまま 通常のフローに従った表示位置 に表示され、通常のフローに従った表示位置 より下にスクロールすると オフセットされた表示位置 に表示される。ただし要素が親要素をはみ出すことはない。
途中からついてくるグローバルメニューなど。 今までは JavaScript でクラスを付け替えして実装していたのが CSS だけで可能になる。
position: sticky はまだ草案段階。 Safari、iOS Safari には -webkit- プレフィックスが必要。 IE は非対応。