jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

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

 

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

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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】固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

続きを見る

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

-jQuery, Web制作