【jQuery】ヘッダーの高さを取得してコンテンツ位置を調整する方法

【jQuery】ヘッダーの高さを取得してコンテンツ位置を調整する方法 jQuery

Webサイトで固定ヘッダーを実装すると、スクロール時にコンテンツがヘッダーと重なってしまうことがあります。この問題を解決するには、ヘッダーの高さを取得して、その分だけコンテンツの余白を調整するのが一般的です。本記事では jQuery を使ってヘッダーの高さを動的に取得し、コンテンツの位置を正しく調整する方法を解説します。

基本的な実装

jQuery では .height() や .outerHeight() を用いることで要素の高さを取得できます。固定ヘッダーを考慮する場合、余白やボーダーも含む .outerHeight() を使うのがおすすめです。 

$(function() {
  var headerHeight = $('header').outerHeight(); // ヘッダーの高さを取得
  $('.content').css('margin-top', headerHeight + 'px'); // コンテンツを下にずらす
});

上記の例では、ヘッダーの高さを取得し、コンテンツ領域に margin-top を設定しています。こうすることで、固定ヘッダーと重ならずに表示されます。

ウィンドウリサイズにも対応する

レスポンシブ対応サイトでは、画面幅によってヘッダーの高さが変わることがあります。そのため、resize イベントでも高さを再計算する必要があります。 

function adjustContentPosition() {
  var headerHeight = $('header').outerHeight();
  $('.content').css('margin-top', headerHeight + 'px');
}

$(function() {
  adjustContentPosition(); // 初回実行
  $(window).on('resize', function() {
    adjustContentPosition(); // リサイズごとに再調整
  });
});

paddingを使う方法

コンテンツ全体を囲むラッパー要素に padding-top を加える方法もあります。レイアウト上、余白を「内側」に作りたいときに有効です。 

$(function() {
  var headerHeight = $('header').outerHeight();
  $('main').css('padding-top', headerHeight + 'px');
});

まとめ

  • .outerHeight() でヘッダーの高さを取得する
  • 高さを margin-top や padding-top に反映して調整する
  • レスポンシブ対応のため、resize イベントで再計算する

jQuery を活用すれば、固定ヘッダーがあるサイトでも簡単にコンテンツの位置を正しく調整できます。