SWELL 下にスクロールすると隠れるヘッダー [WordPress]

wp

WPテーマ「SWELL」ではサイト上部に表示されるヘッダーの追従設定ができます。

しかし常時表示されるので、ヘッダーの高さだけ記事の表示が狭くなってしまうが悩みどころです。

SAVA

スマホだとなるべく広く記事を表示させたいよね。

この記事のカスタマイズをすると、下にスクロールすると隠れるヘッダーが作成できます。

クリックできる目次

下準備

まずは「ヘッダーを追従させる」をオフにしておきましょう。

  • WPダッシュボード
  • 外観
  • カスタマイズ
  • ヘッダー

スクリプトを作成

SWELL子テーマ内 /swell_child/ scripts.js を新規作成

/* --------------------
ヘッダー開閉
-------------------- */
// ヘッダーを取得
const header = document.getElementById("header");
// ヘッダーの高さを取得
const hH = header.clientHeight;
// ウィンドウの高さを取得
const winH = window.innerHeight;
// ページの高さを取得
const docH = document.documentElement.scrollHeight;
// ウィンドウが最下部達した場合のウィンドウ上部の位置を取得
const windBtm = docH - winH;

// 現在地を示す変数を定義
let pos = 0;
// スクロール直前の位置を示す変数を定義
let lastPos = 0;

const onScroll = () => {
  if (pos > hH && pos > lastPos) {
    header.classList.add("header--hide");
  }
  // スクロール位置がヘッダーの高さ分より小さいか
  // またはスクロール位置が最後のスクロール位置より小さい場合はclass名を削除
  if (pos < hH || pos < lastPos || windBtm <= pos) {
    header.classList.remove("header--hide");
  }

  // 最後のスクロール位置を保存
  lastPos = pos;
};

window.addEventListener("scroll", () => {
  // スクロールするごとにpos(現在地)の値を更新
  pos = window.scrollY;
  onScroll();
});

スクリプトを読み込むための設定

  • WPダッシュボード
  • 外観
  • カスタマイズ
  • 高度な設定
  • bodyダグ終了直前に出力するコード

以下のコードをコピペして挿入

<script src="/wp-content/themes/swell_child/scripts.js"></script>

スタイルシートを作成

SWELL 子テーマ内の /swell_child/style.css を編集

/*--------------------------------------
ヘッダー開閉
--------------------------------------*/
#header {
  position: sticky;
  transition: transform 0.4s ease;
}

.header--hide {
  transform: translateY(-150%);
}
SAVA

これだけで設定は完了だよ。動かない場合はブラウザのキャッシュとサーバーのキャッシュをクリアしてみてね。

使いやすいWPテーマ「SWELL」

メモ

SWELL 標準のヘッダー追従設定をした場合は同じヘッダーがもう1つ作成されます。

そのためヘッダーにID(#)を設定した場合にはIDが重複してしまいJavascript が適切に動きません。この記事のカスタマイズではこれを解消できます。

SAVA

下記のカスタマイズしたボタンをヘッダーに置くと、SWELL標準のヘッダー追従の設定をした場合はボタンがうまく動かない不具合が出るよ。

参考サイト

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

サーバーの魅力に取りつかれ、誰にでも分かりやすいサーバー紹介サイトを目指して日夜勉強中。ブログを作りたい人を応援します。

コメント

コメントする

クリックできる目次