Elementor スクロール方向で隠れ戻るヘッダーCSS＋JS（下で隠れ・上で戻る）

💡Elementorのヘッダーをスクロールで制御したい方へ

本テンプレートでは、
スクロール方向（下／上）を判定し、
ヘッダーの表示・非表示を自然に切り替えます。

下にスクロールしている間はヘッダーを隠し、
上に戻すと、なめらかにヘッダーが再表示されます。

挙動の制御はCSSを中心に行い、
スクロール方向の判定には最小限のJavaScriptのみを使用しています。
数行のコードをコピー＆貼り付けするだけで実装できます。

詳しい設定方法は、導入ガイドで
スクリーンショット付きで解説しています。

※ 本テンプレートは、Elementor Proで
ヘッダーをテーマビルダーで作成している環境を想定しています。

🏃‍♀️動きの調整について

ヘッダーの動きは

• 隠れるとき：速く
• 再表示されるとき：ゆっくり

それぞれの速度は、CSSで速度調整が可能です。

サイトの雰囲気に合わせて、
キビキビした動きにも、ゆったりした動きにも変更可能です。

🛠導入は３ステップ

1. ヘッダーにCSSクラスを追加
   Elementorのヘッダーコンテナに
   mhd-hide-headerのクラスを設定します。
2. CSSを貼り付け
   外観 → カスタマイズ → 追加CSS
   または ElementorのカスタムCSSに、
   付属のCSSを貼り付けます。
3. JavaScriptをフッターに追加
   付属のJSコードを、フッターに配置します
   ※Elementor Proのカスタムコード機能（推奨）
   またはコードスニペットプラグイン（WPCode等）

これだけで、スクロール方向に応じた
ヘッダーの見え隠れ動作が有効になります。

導入手順は、
CSS・JavaScriptの貼り付け場所を含めて
スクリーンショット付きの導入ガイドで詳しく解説しています。

⚙対応環境・前提条件

• WordPress
• Elementor
• Elementor Pro

※ 本テンプレートは、Elementor Proのテーマビルダーを使用した
ヘッダー構成を前提としています。
※ ヘッダーのコンテナにCSSクラスを追加する必要があります。

🖥️ 動作確認環境

• Windows：Chrome / Edge
• iOS：iPhone（Safari）実機確認済み
• Android：Chrome 実機確認済み