WordPressで長い目次とハンバーガーメニューをスクロールさせる方法

<?php
// 投稿ページの右側へ、JavaScriptで生成する追従目次の枠を表示する。
if ( is_singular( 'post' ) ) :
?>
  <section class="sidebar__section article-toc"
    data-article-toc hidden>
    <h2>目次</h2>
    <nav aria-label="追従目次">
      <ol class="article-toc__list"
        data-article-toc-list></ol>
    </nav>
  </section>
<?php endif; ?>

<?php
// スマートフォンの主要カテゴリーを開閉するボタンとナビゲーションを表示する。
?>
<button class="menu-toggle" type="button"
  aria-expanded="false"
  aria-controls="site-navigation">
  <span></span><span></span><span></span>
  <span class="screen-reader-text">メニューを開く</span>
</button>

<nav id="site-navigation" class="site-nav"
  aria-label="主要カテゴリー">
  <?php
  wp_nav_menu(
    array(
      'theme_location' => 'primary',
      'container'      => false,
    )
  );
  ?>
</nav>

/* 投稿ページの右側目次を追従させ、長い項目だけを内部スクロールさせる。 */
.article-toc {
  position: sticky;
  top: 10.8rem;
  max-height: calc(100vh - 12.8rem);
  padding: 2.2rem;
  overflow: hidden;
}

.article-toc nav {
  max-height: calc(100vh - 22rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.article-toc__link.is-current {
  color: #0874c9;
  background: #edf6ff;
}

(() => {
  'use strict';

  // 投稿本文の見出しから目次を作り、スクロール位置に応じて現在地を更新する。
  const content = document.querySelector('.entry-content');
  const toc = document.querySelector('[data-article-toc]');
  const list = toc?.querySelector('[data-article-toc-list]');
  if (!content || !toc || !list) return;

  const headings = [...content.querySelectorAll('h2, h3')];
  headings.forEach((heading) => {
    const item = document.createElement('li');
    const link = document.createElement('a');
    link.href = `#${heading.id}`;
    link.textContent = heading.textContent.trim();
    link.dataset.tocTarget = heading.id;
    link.className = 'article-toc__link';
    item.append(link);
    list.append(item);
  });
  toc.hidden = false;

  const links = [...list.querySelectorAll('[data-toc-target]')];
  let ticking = false;
  const updateCurrent = () => {
    const offset = 120;
    let current = headings[0];
    headings.forEach((heading) => {
      if (heading.getBoundingClientRect().top <= offset) current = heading;
    });

    links.forEach((link) => {
      const active = link.dataset.tocTarget === current.id;
      link.classList.toggle('is-current', active);
      active
        ? link.setAttribute('aria-current', 'location')
        : link.removeAttribute('aria-current');
    });
    ticking = false;
  };

  window.addEventListener('scroll', () => {
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(updateCurrent);
  }, { passive: true });
  updateCurrent();
})();

/* スマートフォンの主要メニューを画面内に収め、項目が多い場合だけスクロールさせる。 */
body.menu-open {
  overflow: hidden;
}

.site-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: calc(100dvh - var(--site-header-height));
  padding: 2.4rem 2rem;
  overflow: auto;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.8rem);
  transition: 0.2s ease;
}

.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (min-width: 1181px) {
  .site-nav {
    position: static;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

(() => {
  'use strict';

  // スマートフォンの主要メニューを開閉し、背面固定と読み上げ状態を同期する。
  const button = document.querySelector('.menu-toggle');
  const navigation = document.querySelector('.site-nav');
  const label = button?.querySelector('.screen-reader-text');
  if (!button || !navigation) return;

  const closeMenu = () => {
    button.setAttribute('aria-expanded', 'false');
    navigation.classList.remove('is-open');
    document.body.classList.remove('menu-open');
    if (label) label.textContent = 'メニューを開く';
  };

  button.addEventListener('click', () => {
    const open = button.getAttribute('aria-expanded') !== 'true';
    button.setAttribute('aria-expanded', String(open));
    navigation.classList.toggle('is-open', open);
    document.body.classList.toggle('menu-open', open);
    if (label) label.textContent = open
      ? 'メニューを閉じる'
      : 'メニューを開く';
  });

  navigation.addEventListener('click', (event) => {
    if (event.target.closest('a')) closeMenu();
  });

  window.addEventListener('resize', () => {
    if (window.innerWidth > 1180) closeMenu();
  });
})();