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

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

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

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

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

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

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

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

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

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

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

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）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！