[CSS] position:sticky を使用してヘッダーと現在表示中のセクションの見出しを固定して表示する

CSSsticky

CSSのpositionプロパティにstickyという便利な値があります。

以下のように設定するだけで対象の要素が指定した位置に表示されたらそのままそこに固定で表示してくれます。

h2 {
position:sticky;
top:0;
}

上記を設定することにより対象の要素がページの1番上に到達したらそこで固定して表示されます。

では、ヘッダーは固定しておいて別の見出しをその下に固定して表示する場合はどうしましょう？？

こんな感じの表示の仕方です。

最初の見出しをh1にしてサブの見出しをh2にします。

h1 {
position:sticky;
top:0;
height:50px;
}
h2 {
position:sticky;
top:50;
}

このようにh1の高さを指定、その高さ分を、h2のtopに指定します。

そうすることにより、h2がh1の真下に来たら固定されます。

また次のh2が同じ位置に来たらそこで表示されます。

ここで注意が必要なのは要素の背景色を設定しておくことです

設定しないとこのようにスクロールされていく文字が透けてしまいます。

いくつか試しましたが、重なりについては特に気にしなくてもいいようです。

重なり方で問題が発生する場合にはz-indexで要素の重なり方の調整を行ってください。

CSSsticky