『position:fixed;』など指定時のヘッダー固定の場合に高さ分を開ける方法とスムーススクロールの実装。

CSS3はなんて素晴らしいのだろう。
ということで今までjQueryや必殺技で対処してきた設定がCSS3ではいとも簡単に設定できる。

position:fixed;などでページヘッダー部分を固定した場合、ヘッダーの下に見出しやタイトルが隠れてしまう現象を避けるcssがあるのだ。

ちなみに今まではpaddingなどの手法で対処してきたが、css3なら以下scroll-padding-top: 開けたい高さ;の指定でOK!

  scroll-padding-top: 80px;

そしてオマケとしてスムーススクロール実装。
こちらもjQueryで対処してきた仕掛けだが、cssのscroll-behavior: smooth;で設定可能だ。

scroll-behavior: smooth;

どちらもhtmlへの設定なので、二つ合わせてこんな感じ。

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
まだ投票されていません