ブラウザの幅を縮めた時に画面に固定されたヘッダー内の高さが変わって、コンテンツにかぶってしまうときがありますよね。そんな時の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';
}
} );