CSS Web制作

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でコンテンツを下げるという方法もあります。

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

あわせて読みたい
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法
【jQuery】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

続きを見る

まとめ

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

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作