Elementorでスティッキーヘッダーを作成する（最も簡単な方法）
公開: 2022-04-10この記事では、サードパーティのアドオンを使用せず、非常にシンプルなCSSを使用して、Elementorにスティッキーヘッダーを追加する簡単な方法を紹介します。
Elementorには優れたスティッキーヘッダー機能が組み込まれていないため、サードパーティのプラグインまたはCSSとJavaScriptを使用することになります。
Elementorにスティッキーヘッダーを追加する方法
私たちのエージェンシーは、カスタムCSSの4つの単純な行を使用して、スティッキーヘッダーを追加し、私たちのメソッドをあなたと共有したいと考えていました。 この記事の最後には、スティッキーヘッダーとElementorへの高度な追加機能も含まれています。これは、スクロール時の画像のサイズ変更、スクロール時のスティッキーヘッダーの背景色の変更などに役立ちます。
このガイドは、Elementorproを使用するユーザーを対象としています。 これは、Elementor Proにテーマビルダーが含まれているためです。テーマビルダーを使用すると、独自のヘッダーとフッターを設定できます。 このプラグインをまだ所有していない場合は、基本的にゼロからWebサイトを作成できるため、49.00ドルの価格に見合う価値があります。
このアフィリエイトリンクからそれをつかむことはあなたに追加費用なしで私たちの代理店をサポートします。
ステップ1：基本ヘッダーを作成する
まず、基本的なヘッダーを作成し、それをElementorのすべてのページに適用します。 ヘッダービルダーにアクセスするには、管理バックエンドのカンマでテンプレートに移動し、テーマビルダーをクリックします。
新しいテンプレートを追加し、タイプをヘッダーに変更します。 テンプレートに名前を付けたら、緑色の[テンプレートの作成]ボタンをクリックします。
次に、ヘッダーを作成します。 これを行うには、通常、新しいセクションを作成し、それを2つの列に分割してから、サイトのロゴとナビゲーションメニューを追加します。
通常、サイトのロゴはセクションの左側に直接配置され（そして左側の列に含まれます）、Elementorメニューは右側の列に配置され、右側に配置されます。
メニュー内の各要素の詳細設定での位置をインラインに設定して、1つの列のみを使用することもできます。
水平方向の整列、「間のスペース」を使用して、2つの列と同じ効果を実現できます。 これは、Dom要素の数を減らし、（わずかに）より高速なWebサイトの読み込みにつながるため、推奨される方法です。
Elementorの[スタイリング]タブで、ヘッダーの背景を操作して透明または色付きにすることができます。 この例では、ヘッダーを最初のヒーローセクションにオーバーレイする必要があります。つまり、背景を透明に保ちます。 これを行うには、セクションの背景色をrgb（0,0,0）に設定します。
HTMLタグをデフォルトから「ヘッダー」に変更してください
最後に、ヘッダーに＃my-cool-headerのようなカスタムCSSIDを付けます。 （カスタムCSSクラスも追加します）
ヘッダーを作成したら、それを公開し、それに応じて表示条件を設定します。 この例では、このヘッダーをWebサイトのすべてのセクションに表示しています。 ただし、Elementorの条件付き可視性ツールは業界で最高のツールの1つであり、これを使用すると、必要な場所にスティッキーヘッダーを選択的に表示できます。
この時点で、Webサイトのフロントエンドに移動すると、ヘッダーが目立つように表示されます。 ただし、ご覧のとおり、粘着性はなく、最初のコンテンツをオーバーレイすることもありません。
Elementorヘッダーをスティッキーにする（つまり、画面を下にスクロールしながらコンテンツをオーバーレイする）には、カスタムCSSを追加します。
ヘッダービルダーに戻り、列全体を選択します。 そのセクションの[詳細設定]タブに移動し、カスタムCSS入力を開きます。
?? これは、Elementorでヘッダーをスティッキーにする非常に簡単な方法を紹介する記事の一部です。
カスタムCSS入力に、次のコードを追加します。
#my-cool-header { position : fixed; width : 100% ; top : 0 ; z-index : 9999 ; } コード言語： CSS （ css ）（コピーアンドペーストの代わりに）入力に入力すると、各行の機能を確認できます。 まず、セレクターはこのカスタムCSSをターゲットラッパー要素（この場合はヘッダーセクション）に適用します。
次に、 position：fixedを使用すると、ページを下にスクロールしてもヘッダーが固定されたままになります。
第3に、 top：0は、ヘッダーをブラウザーのビューポートの上部に固定したままにします。
第4に、 z-index：9999は、ヘッダーがページ上のすべてのコンテンツの上に残ることを保証します。
Webサイトのフロントエンドに戻ると、ヘッダーがコンテンツに重なっていることがわかります。 ページを下にスクロールしても、その位置は画面の上部に固定されたままです。
本質的に、これはElementorWebサイトに組み込む最も単純なスティッキーヘッダーです。 必要なのは4行のCSSだけです。
この時点で、ヘッダーを停止してそのままにしておくことができます。 ただし、多くの場合、いくつかの高度な効果を追加したいと考えています。
私たちにとって、Elementorのスティッキーヘッダーの2つの最も重要な効果は次のとおりです。
- ユーザーが画面を下にスクロールしたときに背景を透明から色に変更する
これは、画面を下にスクロールしたときにメニュー要素が表示されるようにするために重要です。 通常、ヒーローは暗い写真で構成されます。つまり、訪問者がナビゲーションを表示してクリックするのに十分なコントラストがあります。 ただし、画面を下にスクロールするときに、Elementorスティッキーヘッダーの背景色を変更すると、読みやすく、使いやすくなります。
- スクロールの画像を変更する
多くの場合、最初のメニューには、その中に名前を表示する会社のロゴがあります。 これにより、16 x 9のような広い比率になり、訪問者が画面を下にスクロールするときに減らすことができます。
会社のロゴのサイズを小さくすることで、Elementorのスティッキーヘッダーの全体の高さも小さくなり、ユーザーがコンテンツを表示するために使用できるビューポートの量が最大になります。
たとえば、ページの上部に正しいロゴのようなロゴがある場合があります。
ただし、ユーザーが下にスクロールすると、ロゴが左に変更（および縮小）され、すべての高さが最小化されます。
高度な追加
スクロールで背景色を変更する
スティッキーなElementorヘッダーに追加したい最初の高度な追加は、スクロールの一般セクションの背景色を変更することです。
これを行うには、いくつかの基本的なJavaScriptとCSSを使用します。 これが怖い場合でも、HTMLブロックにコピーして貼り付けるだけで十分です。
まず、HTMLブロックをヘッダーに直接ドラッグアンドドロップします。 HTMLブロックはフロントエンドに表示されないため、構造をいじる心配はありません。
次のコードを貼り付けます。
< script > window .onscroll = () => { const nav = document .querySelector( '#my-cool-header' ); if ( this .scrollY <= 10 ) nav.className = '' ; else nav.className = 'scroll' ; }; </ script > コード言語： HTML、XML （ xml ）このコードは、10pxを超えてスクロールするとすぐにCSSスタイルを適用します。
ヘッダー付きのカスタムCSSの場合、2つの新しい行を追加します。 最初の行は、透明色と背景色の間の遷移をフェードインします。
2つ目は、元の背景が透明であることを確認します。
#my-cool-header { position : fixed; width : 100% ; top : 0 ; z-index : 9999 ; 遷移： 500msの容易さ;
背景：透明;
}
コード言語： CSS （ css ）次に、完全に新しいCSSセレクターを追加します。これは、ユーザーがページを下にスクロールしたときに背景色を適用します。
#my-cool-header .scroll { background : #000 ; } コード言語： CSS （ css ）これらのCSSコードの両方をコピーして、ヘッダーセクションのカスタムCSSに直接貼り付けるだけです。
次に、ページを保存して、フロントエンドのヘッダーに移動します。 ページを下にスクロールすると、.scrollクラスの効果が適用されます。 この例では、背景を黒に変更しただけですが、サイズやフォントスタイルなどをいじることができます。
スクロールで画像を変更
スティッキーなElementorヘッダーに適用するのが好きなもう1つの高度な効果は、ロゴ画像のサイズを変更することです。ロゴ画像全体を変更することもできます。
まず、JavaScriptと、「スクロール時に背景色を変更する」からすでに配置されているクラスを使用して、画像のサイズを変更する方法について説明します。
オリジナルの背後にあるサイトロゴのセレクターを指定し、次のように.scrollcssを指定するだけです。
#my-cool-header img { width : 100px ; transition : 500ms ease; } #my-cool-header .scroll img { width : 50px ; } コード言語： CSS （ css ）このコードは、ページを下にスクロールするときにヘッダー画像の幅を50ピクセルに変更します。 この場合、50pxのロゴに合うように、実際のヘッダーのサイズを変更する必要がありました。
これは、＃my-cool-header.scrollセレクターに適用されました。
ページを下にスクロールしたときに画像を完全に変更したいとします。 これは可能であり、CSSを使用して非常に簡単に実行できるもう1つのことです。
#my-cool-header { position : fixed; width : 100% ; top : 0 ; z-index : 9999 ; transition : 500ms ease; background :transparent; } #my-cool-header .scroll { background : #000 ; height : auto; margin-top : - 20px !important ; } #my-cool-header img { width : 100px ; transition : 500ms ease; } #my-cool-header .scroll img { opacity : 0 ; transition : 500ms ease; } #my-cool-header .scroll .logo { background-image : url (https://img.freepik.com/free-vector/cute-pig-with-pink-skin-white_1308- 40061 .jpg?size= 626 &ext=jpg); background-size : cover; width : 50px ; transition : 500ms ease; } コード言語： CSS （ css ）これは、元のロゴ画像を非表示にし、その場所に背景画像を表示することです。 この例では、これは別の豚の写真になります。
ElementorのCSSメディアクエリを使用して、画面の幅に応じてさまざまなスクロール効果を適用することもできます。
結論
いくつかの高度な効果とともに、Elementorにスティッキーヘッダーを追加する簡単な方法が示されたことを願っています。
ご不明な点がございましたら、コメント欄でお気軽にお問い合わせください。