ヘッダーってデザインによってはコンテンツの邪魔になったり、非表示の方がコンテンツに集中できたりしますよね。
でもナビゲーション的にヘッダーを消すわけにはいきません！
そんな時はスクロールに応じて表示非表示を切り替えられるようにしてみましょう。
ちなみにこのサイトでもそうしてますので、イメージが掴めない方はページを上やら下やらスクロールしてみてください！
Elementor Pro の場合
まずはヘッダーを作る
お好きな感じでヘッダーを作りましょう！
一応詳しく書きますが、必要ない方は目次から次の工程に飛んじゃってください！
テンプレート > Theme Builder から Header を選択して、ここでヘッダー部分のみを作ります。
とりあえずこんな感じで作ってみました。
個人的なポイント
・横並びにしているコンテナを幅 min( 1160px , 88vw ) とすることで、画面幅に応じて1160pxか88vwどちらか小さい方が適用されるので、いい感じになる。
・モバイルではrightを非表示、アイコンを表示し、open popupでハンバーガーメニューに接続
それぞれ細かいところなので、機会があればまた別の記事で詳しく紹介しますね〜
ヘッダーを固定・クラスをつける
大事なポイントです！
お好みのヘッダーができたら、高度な設定から以下のように設定してください！
これで一旦ヘッダー自体の設定は完了です。
デフォルトページレイアウトを確認しとく
Theme Builderで作った場合、ちゃんとヘッダーが表示されるか確認しときましょう。
左上の サイト設定 > レイアウト > デフォルトテーマレイアウト を Elementor Full Widthに！
それぞれこんな違いがあります。
・テーマ：テーマのレイアウトが適用（ヘッダーフッターもテーマのものになる）
・Elementor Canvas：ヘッダーフッター非表示（ページの中身のみ表示される）
・Elementor Full Width：ヘッダーフッター表示（ページの中身をサンドイッチ）
Theme Builderなどでヘッダーをサイト全体に表示したりする際はElementor Full Widthを選びましょう！
コードを追加
WPダッシュボードから Elementor > Custom Code から NEW CODE で新しいコードを作りましょう。
そこに下記コードをコピペ！
<style>
html{
scroll-behavior: smooth;
}
.header{
transition:.3s !important;
}
</style>
<script>
jQuery(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;
});
});
});
</script>コード詳細
1行目：CSSを追加
2行目：ページ内の移動をなめらかにする
5行目：「header」というクラス名のコンテナは0.3秒で動くように ※お好みの速度に調整してください！
10行目：Java Script を jQuery で簡単に書く
13行目：.headerの高さをheaderHeightとする
14行目：startPos（ひとつ前の位置）を0とする
15行目：ページ読み込み時・スクロール時に以下を実行する
16行目：上からスクロールした距離（今回の位置）をscrollPosとする
17行目：下にスクロールしている？かつ、ヘッダーの高さより下まで来ている？
18行目：そう → ヘッダーをその高さ分だけ上に押し上げる
20行目：そうじゃない → ヘッダーはそのまま
22行目：次のために、startPos を scrollPos（前の位置を今回の位置）として上書き。
これで実際のページを見てみると、、、動きます！
Elementor 無料版の場合
まずはヘッダーを作る
無料版なら個人的には以下のどちらかですかね。
無料プラグインならUAEがおすすめです。
Elementor Pro の Theme Builder のようにヘッダーフッターを作ることができ、サイト全体で同じヘッダーに設定することもできます。
ページ数が多い場合にはこの方が工数が少なく済みますね。
同じようにこんな感じでUAEで作ってみました。
ヘッダーを固定・クラスをつける
ヘッダーができたら同じように、高度な設定から以下のように設定！
ここまではPro版と一緒です。
コードを追加
無料版の場合はいくつかコードの入れ方ありますが、一番簡単な方法を紹介します。
.headerの前にコンテナを入れて、HTMLウィジットを追加！
そこに以下コードをコピペ！
<style>
html{
scroll-behavior: smooth;
}
.header{
transition:.3s !important;
}
</style>
<script>
jQuery(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;
});
});
});
</script>
これで動きます！
まとめ
基本的に大事なところはこれだけです。
ぜひお試しください！
本日もお疲れ様でした〜