jQuery Web制作

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

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

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

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

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

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

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

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!

累計1080部突破!レビュー550件!

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

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

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

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

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

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

あわせて読みたい
【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンク(アンカーリンク)の作り方
【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方

続きを見る

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

 

コード解説

まず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とは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説

続きを見る

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です。

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

以上になります。

あわせて読みたい
【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンク(アンカーリンク)の作り方
【コピペOK!】jQueryを使ったスムーススクロールで移動するページ内リンクの作り方

続きを見る

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

続きを見る

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる

-jQuery, Web制作