コーディング Web制作 jQuery

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

【jQuery】ヘッダーの高さを取得して高さ分コンテンツを下げる方法
ページがヘッダーの下に隠れちゃうけどどうすればいいの?

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

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

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

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

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

効率よくコーディングしたい人はこちら

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

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

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

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

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

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

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はこちらになります。

// ヘッダーの高さ分だけコンテンツを下げる
$(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です。

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

以上になります。

関連記事jQueryを使ったスムーススクロールで移動するページ内リンクの作り方
関連記事固定ヘッダーでページ内リンクのジャンプ先の位置を調整する方法

 

コーディング案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

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

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, jQuery
-,