スクロールに合わせて見え隠れするヘッダーを、WordPress×Elementor×最小限のコードで実装する方法【備忘録】

asumi

未経験でデザイナー独立し、Web制作はSTUDIOを使って完全ノーコードでやってきた私ですが、限界を感じ遂にWordPressに手を出しました。
（STUDIO大好きなんですが、広告用LPとしての運用を見据えると現実的じゃない…）

Elementorなるプラグインを知り、「これならSTUDIO感覚で作れるじゃん！」と勢い込んで作ったLP。
先方に見せると、こんな感じ↓のヘッダーのモーションを付けて欲しいと要望が。。

下にスクロールする間はヘッダーが隠れ、
上にスクロールすると再び現れるという挙動。

コードが書けない私には無理ゲーだったのですが、
詳しい方に頼ったところ、なんとごく最低限の記述をコピペするだけでできちゃいました……！！！！！！

ということで、備忘録。

  •  WordPress

  • Elementor（無料プラン）

のみで、上記のヘッダーアニメーションを実装します。
※Elementor有料プランであれば、この動画が参考になりそう

なお、この記事はコーディングがガチでわからない初心者Webデザイナーが備忘録に書いた初心者向けコンテンツです。
認識違いがある可能性もあるので、鵜呑みにせず参考程度にご覧ください。
（そっと教えていただけると超助かります）


1：ヘッダーのコンテナにCSS IDかクラスを付与

Elementor編集画面でヘッダーのコンテナを選択し、左サイドバーの「高度な設定」内で任意のCSS IDを付与。（クラスでもOK）

このIDに対して、jQuery/CSSで動きを付けていきます。

※今回ヘッダーは、Elementorのコンテナで手動作成。無料プランなのでElementorの専用ウィジェットはなく、他にヘッダー生成用のプラグイン等も使ってません

2：HTMLウィジェットを追加

サイト内のどこかにHTMLウィジェットを追加。

このウィジェットを置くと、プレビューに一応ボックスとして表示されるので、コーディングわからない民としてはどう扱えばいいか全くわからん存在でした。
が、（少なくとも今回の実装では）どこに置いてもいいそう。

①で付与したIDに対して「こういう時にこういう状態にしますよ」という指令をjQuaryで出すのですが、ページ表示時にその指令（コード）が読まれさえすれば動くので、特に場所は関係ないみたいです。
実際、サイトの一番下に置いてるのですが動きます。

3：HTMLウィジェットに下記を記述

こちらの記事を参考に、下記のコードをコピペ。

<script type="text/javascript">
  (function ($) {
    $(function () {
      var headerHeight = $("#header").outerHeight(),
        startPos = 0;
      $(window).on("load scroll", function () {
        var scrollPos = $(this).scrollTop();
        if (scrollPos > startPos && scrollPos > headerHeight) {
          $("#header").css("top", "-" + headerHeight + "px");
        } else {
          $("#header").css("top", "0");
        }
        startPos = scrollPos;
      });
    });
  })(jQuery);
</script>

スクリプトの詳しい説明は参考記事を見てください。

これで読み込むと、「下にスクロール→ヘッダー消える」「上にスクロール→ヘッダー出現」の動作はできました！

jQuery用の記述となってますが、WordPressはデフォルトでインストールされてるので、ウィジェットに書けば普通に動くみたい。
注意点として、 WordPressでは「$」を「jQuery」と記述する必要があります。
上のコードでは「jQuery(function($){」と「});」で囲むことでこのエラーを回避しているようですね。


4：CSSで動きをつける

「外観＞カスタマイズ＞追加CSS」に下記を記入。

#header {
  transition: top 0.3s;
}

指定したID（#header）を0.3秒かけて上に移動させるアニメーション、というわけですね。

これで公開して更新すると、、、、
ぬるっと動くようになりました😭😭

 WordPressもコーディングも初心者なので苦労しました。。が！！
WordPress＋Elementor無料プランでもHTMLをカスタムしたりCSSを書けるとわかったことですし、
Web上にはたくさんの先人が残したコピペOKのコードが転がっているので
「ノーコード（Elementor）＋コピペ程度の最低限のコーディング」でそこそこのものは作れそう！と発見でした。

Elementorも有料にすればもちろん便利ですが、こういうHTMLウィジェットの使い方等がわかっていれば無料でも結構いけるんじゃないかなと。

制作の幅が広がって、経験値かなり上がりました！やった〜〜

これからもノーコード極めていきます。

いいなと思ったら応援しよう！