【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法

ページがヘッダーの下に隠れちゃうけどどうすればいいの？

例えばこちらの場合、コンテンツの上部がヘッダーの下になっています（ヘッダーを透過させているので分かるかと思います）

スクロールするとより分かりやすいかと思います。

See the Pen
ヘッダーの高さ分コンテンツを下げない by junpei (@junpei-sugiyama)
on CodePen.

これは固定ヘッダーにした時に起こる現象ですね。

このコンテンツを一番上にしたときヘッダーの下に隠れないように、jQueryを使ってヘッダーの高さ分コンテンツの位置を下げる方法を解説します。

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

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

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

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

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

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

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

jQueryでヘッダーの高さを取得して高さ分コンテンツを下げる方法

まずは今回の完成形を見てみます。

スクロールすると分かると思いますが、コンテンツのトップはヘッダーの高さ分下がっています。

See the Pen
ヘッダーの高さ分コンテンツを下げる by junpei (@junpei-sugiyama)
on CodePen.

これが冒頭ではヘッダーの高さ分コンテンツが下に隠れていましたね。

スクロールがなめらかに動く方法については以下の記事を参照下さい。

それではコードを解説していきます。

コード解説

まずHTMLはこちらになります。

<header class="header js-header">
  <nav>
    <ul>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#works">WORKS</a></li>
      <li><a href="#gallery">GALLERY</a></li>
      <li><a href="#service">SERVICE</a></li>
    </ul>
  </nav>
</header>
<main>
  〜中略〜
</main>

特に変わった点はありませんが、私はjQueryやJavaScriptでコードを書く箇所のclass名にはいつも『js-』を付けています。

そうすれば『このclassはjsで使うんだな』というのが分かります。

CSSはヘッダーをposition: fixed;とtop: 0;でページトップに固定しています。

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

position: fixed;はposition: absolute;と同じく高さがなくなるので、 コンテンツのトップがヘッダーの下ではなくページトップになってしまいます。

そしてjQueryでmainタグをheaderの高さ分位置を下げます。

jQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryを使ったことがない人はこちらの記事を参照下さい。

jQueryはこちらになります。

// ヘッダーの高さ分だけコンテンツを下げる
$(function () {
  const height = $(".js-header").height();
  $("main").css("margin-top", height);
});

中身は2行だけですが、1行目の$(".js-header")に取得したい高さに書いたclass名を書き、2行目の$("main")に下げたいコンテンツのタグを書きます。

もしmainタグにclass名を付けていたらclass名でもOKです（$(".main")など）

そして2行目の.css("margin-top", height)で、ヘッダーの高さ分mainタグにmargin-topを設定しています。

つまり『ヘッダーの高さを取得して、その高さ分margin-topでコンテンツを下げる』

ということです。

ヘッダーの高さが画面幅によって変わる時は？

ヘッダーの高さをpxで固定せず、余白やフォントサイズをremやvwで設定していたら画面幅によってヘッダーの高さが変わることがあります。

今回の方法は『ページを読み込んだ時のヘッダーの高さを取得』となるので、ページを開いた時のヘッダーの高さに合わせてmargin-topの数値は自動で変わります。

ただしヘッダーの高さは『ページを読み込んだ時に決まる』ので、画面幅を変えていっても取得したヘッダーの高さは変わりません。

ここは注意が必要なので、これを避けたい場合はヘッダーの高さを固定にするしかないかも知れません。。。

ヘッダーの高さより少し余白を持たせたい場合

今回は『ページを読み込んだ時のヘッダーの高さ分』コンテンツを下げましたが、これだとヘッダーとコンテンツがピッタリくっついています。

多くの場合はこれでいいと思いますが、この位置は調整可能です。

// ヘッダーの高さ分だけコンテンツを下げる
$(function () {
  const height = $(".js-header").height();
  $("main").css("margin-top", height + 20); // 20pxプラスで下げる
});

See the Pen
ヘッダーの高さ分コンテンツを下げる（微調整） by junpei (@junpei-sugiyama)
on CodePen.

height + 20の部分ですね。

もし下げるのでなく上げる場合はheight - 20と書けばOKです。

ヘッダーは固定にするケースが多いと思うので、この方法を覚えておくと便利かと思います。

以上になります。

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