ひびのログ

日々ではないけどログを出力していくブログ

ヘッダーを固定するならとりあえずこの 1 行を入れとけっていう CSS

TL;DR

body {
  scroll-padding-top: <ヘッダーの高さ + α>;
}

前置き

下の記事では、ヘッダー・フッターは position: fixed; より Flexbox とか CSS Grid とかで作ったほうがいいのでは、的な話をしました(個人の感想です)。

www.tee-talog.com

そうはいっても、諸々の理由で position: fixed; で作るほうが楽だったりしますよね。

ということで、 position: fixed; でヘッダーを作るときに設定すべき CSS です。

これだ!

body {
  scroll-padding-top: <ヘッダーの高さ + α>;
}

なにこれ?

ページ内リンク(<a href="#~~">)のときに、指定した高さ分を考慮してジャンプしてくれるようになります。

つまり、ヘッダーの高さが 50px で scroll-padding-top に 60px を設定した場合、ページ内リンクをクリックするとヘッダーの 10px 下にジャンプ先の要素がきます。

メリット

ジャンプ先の要素(章タイトル等)が隠れない!

デメリット

なし!

まとめ

お願いなのでこの 1 行を入れてくださいなんでもしますから!

ユーザビリティが格段に上がるので、ぜひ設定してみてください。