要素をスクロールに応じて固定表示する方法です。
ヘッダーやサイドメニューなど、一部の要素だけを画面上に固定したい場合に便利なのがposition: stickyです。topやleftなどと組み合わせて使用します。
基本のCSS
1 2 3 4 5 6 7 |
.sticky-box { position: sticky; top: 0; background: white; } |
スクロールで見出しを固定する例
1 2 3 4 5 6 7 8 |
.section-title { position: sticky; top: 60px; background: #fff; z-index: 10; } |
補足
stickyは親要素の範囲内でしか固定されません。