SWELL│スマホ表示で「上スクロール時のみヘッダー表示」にする方法

2025.06.172026.10.04

SWELLテーマを使ってスマホサイトを作成する際、「ヘッダーは普段は非表示にして、上スクロール時のみ表示させたい」というケースがあります。

スクロール中の本文表示領域を広げたい場合に、ヘッダーの表示を切り替える方法です。

本記事では、JavaScriptとCSSを用いてその動きを実現する方法を解説します。

下記のサイトで確認できます。

WordPressテーマSWELLに強いホームページ制作会社 | MOTOKI合同会社

SWELLのスマホ表示で「上スクロール時のみヘッダー表示」にする方法

スマホ表示（959px以下）限定
下にスクロールしている間はヘッダーを非表示
上にスクロールするとヘッダーが出現

以下のコードを挿入するとSWELLのスマホ表示で「上スクロール時のみヘッダー表示」にできます。

CSS

まずはCSSです。

このコードは959px以下で適用し、CSSを追加CSSか子テーマのstyle.cssの一方へ貼り付けます。

@media (max-width: 959px) {
  #header {
    position: sticky;
    top: var(--waza-admin-bottom, 0px);
    z-index: 1000;
    transition: transform .3s ease;
  }
  #header.waza-header-hidden { transform: translateY(calc(-100% - var(--waza-admin-bottom, 0px))); }
  #header:focus-within, html[data-spmenu="opened"] #header { transform: none; }
}
@media (prefers-reduced-motion: reduce) { #header { transition: none; } }

JavaScript

続いてJavaScriptです。

以下のPHPを、バックアップした子テーマのfunctions.phpかCode SnippetsのPHPスニペットの一方へ追加します。

JavaScript欄へ貼る場合はscriptタグ内だけを使用し、PHPの登録部分を混ぜないでください。

add_action('wp_footer', function () { ?>
<script>
(() => {
 const init = () => {
  const header = document.getElementById('header');
  if (!header) return;
  const mobile = window.matchMedia('(max-width: 959px)');
  let lastScroll = Math.max(0, window.scrollY);
  function reset() {
    header.classList.remove('waza-header-hidden');
    const bar = document.getElementById('wpadminbar');
    header.style.setProperty('--waza-admin-bottom', Math.max(0, bar ? bar.getBoundingClientRect().bottom : 0) + 'px');
    lastScroll = Math.max(0, window.scrollY);
  }
  mobile.addEventListener('change', reset);
  header.addEventListener('focusin', reset);
  window.addEventListener('scroll', function () {
    const bar = document.getElementById('wpadminbar');
    header.style.setProperty('--waza-admin-bottom', Math.max(0, bar ? bar.getBoundingClientRect().bottom : 0) + 'px');
    const currentScroll = Math.max(0, window.scrollY);
    if (!mobile.matches) { reset(); return; }
    if (currentScroll <= header.offsetHeight || header.contains(document.activeElement) || document.documentElement.getAttribute('data-spmenu') === 'opened') {
      header.classList.remove('waza-header-hidden');
    } else if (currentScroll < lastScroll) {
      header.classList.remove('waza-header-hidden');
    } else if (currentScroll > lastScroll) {
      header.classList.add('waza-header-hidden');
    }
    lastScroll = currentScroll;
  }, { passive: true });
  reset();
 };
 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });
 else init();
})();

</script>
<?php });

以上、コードを挿入しましたら、スマホで動作を確認しましょう。

下記のサイトで確認できます。

WordPress専門のホームページ制作会社 | MOTOKI合同会社