TL;DR
body { scroll-padding-top: <ヘッダーの高さ + α>; }
前置き
下の記事では、ヘッダー・フッターは position: fixed;
より Flexbox とか CSS Grid とかで作ったほうがいいのでは、的な話をしました(個人の感想です)。
そうはいっても、諸々の理由で position: fixed;
で作るほうが楽だったりしますよね。
ということで、 position: fixed;
でヘッダーを作るときに設定すべき CSS です。
これだ!
body { scroll-padding-top: <ヘッダーの高さ + α>; }
なにこれ?
ページ内リンク(<a href="#~~">
)のときに、指定した高さ分を考慮してジャンプしてくれるようになります。
つまり、ヘッダーの高さが 50px で scroll-padding-top に 60px を設定した場合、ページ内リンクをクリックするとヘッダーの 10px 下にジャンプ先の要素がきます。
メリット
ジャンプ先の要素(章タイトル等)が隠れない!
デメリット
なし!
まとめ
お願いなのでこの 1 行を入れてくださいなんでもしますから!
ユーザビリティが格段に上がるので、ぜひ設定してみてください。