「スマホの画面を広く見せたい」「記事に集中してほしいけれど、ナビゲーションも残したい」
そんな時におすすめなのが、
下にスクロールするとスッと消え、
上にスクロールするとフワッと現れるヘッダーです。
大人気テーマ「SWELL」の標準機能（追従ヘッダー）と、少しのコード（JavaScript）を組み合わせるだけで簡単に実装できます。
今回はサイト軽量化のためにjQueryを使わない（バニラJavaScript）方法で、
さらにPCとスマホで消えるタイミングを別々に調整した決定版のコードを解説します！
SWELL標準の「ヘッダー追従」を有効にする
まずは下準備として、SWELLの標準機能でヘッダーが追いかけてくるように設定します。ここがONになっていないと、追従用のパーツが生成されないため必ず設定してください。
- WordPress管理画面から 「外観」 ＞ 「カスタマイズ」 ＞ 「ヘッダー」 を開く
- 「ヘッダーの追従設定」 の項目を探す
- 「PCで追従させる」「スマホで追従させる」の両方にチェックを入れてON にして保存する
カスタマイズコードを貼り付ける
設定はたった1箇所、JavaScriptを貼り付けるだけで完了します。
貼り付ける場所は「外観」 ＞ 「カスタマイズ」 ＞ 「高度な設定」 の 「</body_head>直前」に次のコードを貼り付けてください。
<script>
document.addEventListener('DOMContentLoaded', () => {
let beforePos = 0;
// 対象のヘッダー要素を取得
const pcFixHeader = document.querySelector('.l-fixHeader');
const spHeader = document.querySelector('.l-header');
// アニメーションを0.7秒（PC）と0.3秒（スマホ）にする基礎設定
if (pcFixHeader) {
pcFixHeader.style.setProperty('transition', 'transform 0.7s ease-in-out', 'important');
pcFixHeader.style.setProperty('opacity', '1', 'important');
pcFixHeader.style.setProperty('visibility', 'visible', 'important');
}
if (spHeader) {
spHeader.style.setProperty('transition', 'transform 0.3s ease-in-out', 'important');
}
// スクロール時のメイン処理
const handleScroll = () => {
const scrollPos = window.scrollY || document.documentElement.scrollTop;
const isPC = window.innerWidth >= 960;
const targetThresh = isPC ? 1000 : 700;
// ① 基準値（PC:1000px / SP:700px）未満のときは通常位置へ戻す
if (scrollPos < targetThresh) {
if (isPC && pcFixHeader) {
pcFixHeader.style.setProperty('transform', 'translateY(-110%)', 'important');
pcFixHeader.style.setProperty('-webkit-transform', 'translateY(-110%)', 'important');
}
if (!isPC && spHeader) {
spHeader.style.setProperty('transform', 'translateY(0)', 'important');
spHeader.style.setProperty('-webkit-transform', 'translateY(0)', 'important');
}
beforePos = scrollPos;
return;
}
// ② 基準値を超えた直後のチラつき・誤判定防止
if (beforePos < targetThresh) {
beforePos = scrollPos;
if (isPC && pcFixHeader) {
pcFixHeader.style.setProperty('transform', 'translateY(-110%)', 'important');
pcFixHeader.style.setProperty('-webkit-transform', 'translateY(-110%)', 'important');
}
if (!isPC && spHeader) {
spHeader.style.setProperty('transform', 'translateY(-110%)', 'important');
spHeader.style.setProperty('-webkit-transform', 'translateY(-110%)', 'important');
}
return;
}
// ③ 基準値を超えている状態での純粋な上下スクロール判定
if (scrollPos > beforePos) {
// 【下スクロール時：隠す】SWELLの「translateY(0) !important」を完全に上書きして強制的に隠す
if (isPC && pcFixHeader) {
pcFixHeader.style.setProperty('transform', 'translateY(-110%)', 'important');
pcFixHeader.style.setProperty('-webkit-transform', 'translateY(-110%)', 'important');
}
if (!isPC && spHeader) {
spHeader.style.setProperty('transform', 'translateY(-110%)', 'important');
spHeader.style.setProperty('-webkit-transform', 'translateY(-110%)', 'important');
}
} else if (scrollPos < beforePos) {
// 【上スクロール時：出す】元の位置に戻す（ここも0.7秒が適用されます）
if (isPC && pcFixHeader) {
pcFixHeader.style.setProperty('transform', 'translateY(0)', 'important');
pcFixHeader.style.setProperty('-webkit-transform', 'translateY(0)', 'important');
}
if (!isPC && spHeader) {
spHeader.style.setProperty('transform', 'translateY(0)', 'important');
spHeader.style.setProperty('-webkit-transform', 'translateY(0)', 'important');
}
}
beforePos = scrollPos;
};
window.addEventListener('scroll', handleScroll, { passive: true });
});
</script>
これで設定はすべて完了です！古いキャッシュを読み込まないよう、シークレットウィンドウ等でスクロールして動きを確認してみてください。
ヘッダーが消え始めるタイミングを変えたい場合
「もう少し早く（または遅く）ヘッダーが消え始めてほしい」という場合は、先ほどのJavaScriptコード内にある「1000」や「700」という数値を変更します。
これは「ページの一番上から何ピクセル下にスクロールしたら機能を動かすか」という基準値です。
- PCのタイミング調整
-
1000の数値を変更（例：1400にすると、もっと記事を読み進めてから消えるようになります） - スマホのタイミング調整
-
700の数値を変更（例：400にするともっと早く消えます）
自分のブログのファーストビューの長さや記事の読まれ方に合わせて、自由に数値を微調整してみてください。
まとめ
システムを綺麗にコントロールすることで、ユーザーの閲覧を邪魔しないスマートなヘッダーが実現できます。
PCとスマホで個別に条件を設定し、さらにバニラJSを採用したことで、
「デザインが崩れない」
「一瞬チラつかない」
「サイトが重くならない」
という最高の環境を作ることができます。ぜひあなたのブログでも試してみてください！
※当サイトはこのコードを採用してます！