こんにちは、ナカムラです。
スクロールしてもヘッダーが追従するようにposition: fixed;などで固定配置することがよくあります。
その際、ページ内リンクで該当箇所へスクロールすると、そのままではヘッダーが重なってしまいます。
この問題について、だいぶ前にscroll-snapでどうにかできないかという検証をしたこともありましたが、結局JavaScriptに頼りました。 tech.arms-soft.co.jp
今現在はどうかというと、すでに対応可能なプロパティが各ブラウザで使用できる状況にあります。
scroll-padding-topです。
htmlに対して実装します。
scroll-padding-top - CSS: カスケーディングスタイルシート | MDN
DEMO
See the Pen scroll-padding-top by Nakamura (@takayo-nakamura) on CodePen.
ヘッダーの高さが80pxの場合、値を80pxにします。
scroll-behavior: 80px;
これだけで解消されます。
JavaScriptや、padding・marginでの調整は不要です。
合わせて使いたいscroll-behavior: smooth;
スムーススクロールを実装するCSSプロパティです。
こちらもhtmlに実装します。
scroll-behavior: smooth;
まとめ
このプロパティを作ってくださってありがとうございます。
非常に面倒くさかったんです・・本当に助かります。
