／ 　Posted by 川路 正樹

JavaScriptでサブカラムのメニューをメインカラムのヘッダーと位置を揃える方法

メモ

Webページのレイアウトを作る際、サイドバーやサブカラムにメニューを配置することはよくあります。この時、メインカラムにあるヘッダーとメニューの位置を揃えることで、見やすさを向上させることができます。

もくじ

完成コード

本記事では、JavaScriptを使用して、サブカラムのメニューをメインカラムのヘッダーと位置を揃える方法について解説します。
今回用意したのは下記のコードになります

updateSubColumnMenuTop();
window.addEventListener('resize', updateSubColumnMenuTop);
window.addEventListener('scroll', onScroll);

function updateSubColumnMenuTop() {
  const headerHeight = document.querySelector('#main article header').offsetHeight;
  const subColumnMenu = document.querySelector('#sub-section');
  const subColumnMenuTop = document.querySelector('#main article .entry-body').offsetTop - headerHeight + 130;
  const windowWidth = window.innerWidth;

  subColumnMenu.style.top = windowWidth > 767.8 ? `${subColumnMenuTop}px` : '';
  subColumnMenu.style.bottom = windowWidth <= 767.8 ? '0' : '';
}

function onScroll() {
  if (window.scrollY === 0) {
    updateSubColumnMenuTop();
  }
}

1. 初期化処理の設定

ウェブページが読み込まれた際に、初期化処理を実行するように設定します。
以下のコードは、ウィンドウがリサイズされたとき、またはスクロールされたときに、updateSubColumnMenuTop関数を実行するように設定したものです。

window.addEventListener('load', function() {
  // 初期化処理
  updateSubColumnMenuTop();
  window.addEventListener('resize', updateSubColumnMenuTop);
  window.addEventListener('scroll', onScroll);
});

2. メニューの位置を調整する関数を作成する

以下の関数は、サブカラムのメニューの位置を調整するために使用します。具体的には、メインカラムのヘッダーとメニューの位置を揃えるために、メニューの上端の位置をメインカラムのヘッダーの下に設定します。

function updateSubColumnMenuTop() {
  const headerHeight = document.querySelector('#main article header').offsetHeight;
  const subColumnMenu = document.querySelector('#sub-section');
  const subColumnMenuTop = document.querySelector('#main article .entry-body').offsetTop - headerHeight + 130;
  const windowWidth = window.innerWidth;

  subColumnMenu.style.top = windowWidth > 991.8 ? `${subColumnMenuTop}px` : '';
  subColumnMenu.style.bottom = windowWidth <= 991.8 ? '0' : '';
}

上記コードでは、querySelectorを使用して、メインカラムのヘッダーの高さを取得し、それを subColumnMenuTop の計算に使用します。また、ウィンドウの幅に応じて、メニューの位置を調整するための条件分岐を追加しています。

3. スクロール時にメニュー位置を更新する関数を作成する

以下の関数は、ウェブページがスクロールされた際に、メニューの位置を更新するために使用します。具体的には、画面が最上部にスクロールされたときに、メニューの位置がメインカラムのヘッダーの下に戻ります

function onScroll() {
    if (window.scrollY === 0) {
        updateSubColumnMenuTop();
    }
}

この関数は、scroll イベントが発生したときに呼び出されます。window.scrollY が 0 のとき、つまり画面が最上部にスクロールされたときに、updateSubColumnMenuTop() 関数を呼び出してメニューの位置を更新します。これにより、画面が最上部にスクロールされたときにメニューが適切な位置に表示されるようになります。

関連する記事