ブラウザのリサイズで固定ヘッダーメニューの高さが変わった時にコンテンツの高さも調整するJavaScript

ブラウザの幅を縮めた時に画面に固定されたヘッダー内の高さが変わって、コンテンツにかぶってしまうときがありますよね。そんな時のJavaScriptです。ブラウザのリサイズを感知して固定ヘッダーの高さが変わった時に自動的に調整します。

/**
 * ヘッダーの高さでコンテンツの表示を調整
 */
window.addEventListener( 'DOMContentLoaded', function() {
	const siteHeaderElm = document.querySelector( '.site-header' );
	const contentElm    = document.querySelector( '.page-header' );

	adjustHeight();
	window.addEventListener( 'resize', adjustHeight );
	
	function adjustHeight() {
		let headerHeight = siteHeaderElm.clientHeight;
		contentElm.style.paddingTop = headerHeight + 'px';
	}
} );

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。