elementorでスクロールした時にヘッダーを切り替える

elementorでスクロールした時にヘッダーを切り替える方法

画面上部のヘッダーをスクロールすると違うデザインのヘッダーを固定させて表示できるようにする方法です。
また固定ヘッダーはアニメーション効果であるtransitionプロパティを使って、スクロール後にゆっくりと出現するようにします。

動作イメージ↓

前提条件

  • ページビルダー:elementor Pro
  • テーマ:Astra Pro ※何でもよい
  • テーマテンプレート:starter Templates ※何でもよい
目次
    Add a header to begin generating the table of contents
    テンプレートに表示されているデフォルトのメニューは一旦消します。
    ダッシュボードから外観>カスタマイズ>ヘッダービルダーを選択し、 「siteTitle&Logo」と「メインメニュー」を削除します。

    ヘッダー1の作成

    テンプレート>新規追加を選択します。
    テンプレートの種類を選択フォームが表示されるので、種類を「Header」、名前には「sticky-Header」と入力し、テンプレートを作成のボタンをクリックします。
    ※テンプレートの名前は好きな名前で良いです。

    elementorで用意されているヘッダーのテンプレート集が表示されますが、今回は新規で作成するので、✕をクリックしてフォームを消します。
    新しいセクションを追加します。
    今回は2分割カラムを選択します。
    ナビゲーターのセクション名を経分かりやすい名前にしておくと良いでしょう。今回は「ヘッダー1」とします。
    左側のカラムに「siteLogo」ウェジェットを配置して右側には「ナビメニュー」ウェジェットを配置します。
    ※事前にロゴとメニューは作成してください。

    ロゴとメニューの大きさ、配置、色を調整します。
    【ロゴ】
    ・幅:110px
    ・位置:左寄せ
    【メニュー】
    ・文字色:黒
    ・位置:右寄せ
    また今回はヘッダーの背景色を白にしたいと思います。
    更にヘッダー1は最初に表示されるものなので表示順を最上位にします。
    高度な設定のz-indexの値を「100」にします。

    ヘッダー2の作成

    次にヘッダー2を作成します。
    このヘッダーは画面を下にスクロールしたと時にヘッダーを固定して常に画面上部に表示されるものです。
    また今回はアニメーションの要素を追加して、スクロール後にゆっくりとヘッダーが画面上部からスライドしながら出現するように動きのあるヘッダーにしたいと思います。

    まず、ヘッダー1のセクションごと複製します。
    ナビゲーターのセクション名を「ヘッダー2」としておきます。
    ヘッダー2は背景色を黒、透明度を薄くします。
    背景色が黒なのでメニューの文字色を白にします。

    次にセクションの編集から高度な設定>モーション効果を開きます。 Stickyを「上」に変更します。
    するとヘッダー2は画面を下にスクロールしても画面上部に固定されるようになります。

    cssの設定

    ヘッダー2は通常(画面が最上部に位置している時)は非表示になっていなければいけません。
    またスクロール後にゆっくり出現するアニメーション効果をつたいので、ここでCSSを使って実現したいと思います。
    ヘッダー2のクラス名を定義します。
    セクションを編集から高度な設定を開き、CSSクラスに「header-2」と入力します。

    ダッシュボードから外観>カスタマイズ>追加CSSを開きます。
    下記の通りCSSコードを入力します。

    /* ヘッダーアニメーション設定 */

    .header-2 {
         transform: translatey(-80px);
         transition: all 1s ease!important;
         -moz-transition: all 1s ease!important;
         -webkit-transition: all 1s ease!important;
    }
    .elementor-sticky–effects.header-2 {
         height: auto!important;
         transform: translatey(0px);
    }

    注意!Chrome、Safari、FireFoxでも古いバージョンの場合は、ベンダープレフィックスという識別子を指定しないと正常に動作しない場合があります。

    ベンダープレフィックスをつけた場合の書き方

    Chrome/Safariの場合:-webkit-transition
    FireFox の場合:-moz-transition

    ここで一度「公開」をクリックして確認してみましょう。
    ヘッダー1が表示されています。
    下にスクロールするとヘッダー1は画面上部に消えて行き、ヘッダー2が画面上部から現れました。
    設定

    その他の調整

    ヘッダー1が表示されている時、ヘッダー下部に余分なスペースがありますので、ヘッダー2のマージンを調整します。
    高度な設定からマージンの上をマイナス方向に移動する。
    値は「-80」
    次に固定ページ(HOME)のマージンも調整します。
    ページの一番上のセクションを選択し、高度な設定のマージンで上の値をマイナスの値を入れます。
    セクションの上部が編集画面の上端まで来るように値を調整します。
    今回は「-70」にしました。
    続いてヘッダー2がゆっくり出現するように設定します。
    ヘッダー2のセクションから高度な設定>モーション効果を開きます。
    Effects Offsetの値を入力します。値:300
    ※1 Effects Offsetとはスティッキー効果が始まる前にユーザーがスクロールしなければならないピクセル数
    ※2 Effects Offsetは、sticky要素にCSSが追加された場合にのみ影響します。

    完了です。

    動作を確認してみましょう。

    スクロールすると・・・
    ゆっくりとヘッダー2が出現しました。

    動画はこちら↓

    以上です。
    Facebook
    Twitter

    関連する記事

    上部へスクロール