Xwriteで下スクロールで隠れ、上スクロールで出現する追従ヘッダーを作る

2026-02-212026-03-20

WordPress

Xwriteで追従ヘッダーをオンにしている場合、下スクロールでヘッダーを隠し、上スクロールで表示する機能を追加できます。さらに、半透明＋背景blurで滑らかに見せる方法を解説します。

目次 [ close ]

1. CSS（カスタマイズ > 追加CSSにコピペ）

まずはヘッダーの見た目とアニメーションを設定します。

/* ====================================
XWRITE 追従ヘッダー：半透明 + 背景blur
==================================== */
.header-fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.3s ease, backdrop-filter 0.3s ease;
  backdrop-filter: blur(8px); /* 背景をぼかす */
  background-color: rgba(255,255,255,0.8); /* 半透明 */
}
.header-fix.hidden {
  transform: translateY(-100%); /* 上に隠す */
}
.header-fix.visible {
  transform: translateY(0); /* 表示 */
}
.header-fix .gnav .menu-item a {
  color: #000; /* メニュー文字色 */
  text-decoration: none;
}

2. JavaScript（カスタマイズ > ヘッダー > headセクション > <body> 終了直前にコピペ）

スクロール方向を判定してヘッダーを隠す・表示するスクリプトです。ヘッダー高さは自動判定されます。

<script>
document.addEventListener("DOMContentLoaded", function() {
  const header = document.querySelector(".header-fix");
  let lastScroll = window.pageYOffset;
  let ticking = false;

  function onScroll() {
    const currentScroll = window.pageYOffset;
    const headerHeight = header.offsetHeight; // ヘッダーの高さを自動取得

    if (currentScroll > lastScroll && currentScroll > headerHeight) {
      // 下スクロール → ヘッダーを隠す
      header.classList.add("hidden");
      header.classList.remove("visible");
    } else if (currentScroll < lastScroll) {
      // 上スクロール → ヘッダーを表示
      header.classList.remove("hidden");
      header.classList.add("visible");
    }

    lastScroll = currentScroll;
    ticking = false;
  }

  window.addEventListener("scroll", function() {
    if (!ticking) {
      window.requestAnimationFrame(onScroll);
      ticking = true;
    }
  });
});
</script>

追従サイドバーを設定している場合

追従サイドバーを設定している場合、追従ヘッダーが常駐している前提で追従サイドバーの固定される高さが決まっているため、追従ヘッダーが隠れているときの追従サイドバーの高さと追従ヘッダーが出現しているときの追従サイドバーの高さを指定します。

:root{
	--header-height:100px;
}

.header-fix.-for-pc ~ .contents .container .side .sidebar-sticky{
	top:var(--header-height);
	transition: top 0.3s ease;
}

.header-fix.hidden.-for-pc ~ .contents .container .side .sidebar-sticky{
	top:30px;
}