CSSだけで固定ヘッダー時のページ内スクロール位置がズレないようにする方法【scroll-padding-top使用】

ページ内スクロールさせたら、ヘッダーがコンテンツに重なっちゃうんだけど、どうにかならない？

例えば、以下のような場合。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ヘッダーのメニューをクリックすると、各コンテンツの上にヘッダーが重なってしまうのが分かります。

今回は、ページ内スクロールしてもコンテンツに重ならない方法を解説します。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSだけで固定ヘッダー時のページ内スクロール位置がズレるのを解決する方法

先ほどのデモはヘッダーをposition: fixed;で固定していて、これを書くと要素が浮くような感じになるため、その下に要素が潜り込んでしまうのです。

これを解決するには、ヘッダーの高さが50pxなら、以下のコードを書けばOKです。

html {
  scroll-padding-top: 50px; /* ヘッダーの高さ */
}

デモはこちらです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

今度はセクションの真上にピッタリとヘッダーが来ました（ページ内スクロールした後に、少しスクロールすると分かります）

固定ヘッダーの高さが可変の場合

scroll-padding-topを使う場合は、ヘッダーの高さが決まっている場合ですが、中には画面幅によって可変する場合もあるかも知れません。

その場合は変数を使うなどの方法もあるかも知れませんが、jQueryを使ってヘッダーの高さを取得して、その分をmargin-topでコンテンツを下げるという方法もあります。

その方法については、以下の記事を参照下さい。

まとめ

今回は、scroll-padding-topを使って、固定ヘッダー時のページ内スクロール位置がズレるのを解決する方法を解説しました。

この方法は一行だけで済むので簡単ですが、ヘッダーの高さが可変の時は注意しましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！