下スクロールで非表示・上スクロールで再表示するグローバルナビ
こんにちは。熊本の中小企業診断士、経営コンサルタントのLEPコンサルティングです。当サイトで使用しているWordPressの有料テーマSWELLのユーザーフォーラムで、タイトルに記載した機能実装の要望があがっていました。
WEBサイトを下スクロールして読み進めている際は、グローバルナビメニューは使うことがないので画面の圧迫感に繋がり、不要かもしれませんね。
今後のメジャーアップデートで実装されるかもとのことですが、基本的にはWordPressは自分でカスタマイズする前提だと考えているので、当サイトに同機能を導入してみました。
このページでも良いので、下スクロールと上スクロールの挙動を確認して見てください。下に読み進めている際はグローバルナビが非表示になり、上スクロールで再表示されるようになっていると思います。
基本的には下記のリンク先のWEBサイトを見て頂ければ、かなり分かりやすく記述の説明まであるので実装できると思いますが、今回はSWELLの初心者ユーザー向けに誰でもこの実装できるように記載していきます。
なお、SWELL使用者向けに解説していますが、どのテーマであっても実装は可能です。
＊必ずSWELLの子テーマをDLしてそちらでカスタマイズを行ってください。
SWELLの設定とJS・CSSの記述内容
SWLLのヘッダー設定
まずは導入にあたり、SWELLのカスタマイザーから下記画像を参考にヘッダーの設定を行います。
引用元のブログではCSSで自動追従させるようになっていますが、SWELLは基本設定でヘッダーの自動追従が可能ですので、その部分の記述（後述）は必要ありません。
JavaScriptの記述
JSの記述はほぼ引用元のブログのまんまですが、2行目のID指定を下記の通り、'fix_header'としましょう。
3行目のheight = 56;はヘッダーが隠れ始める位置の指定ですので、各自調整してください。
(function() {
const target = document.getElementById('fix_header'),
height = 56;
let offset = 0,
lastPosition = 0,
ticking = false;
function onScroll() {
if (lastPosition > height) {
if (lastPosition > offset) {
target.classList.add('head-animation');
} else {
target.classList.remove('head-animation');
}
offset = lastPosition;
}
}
window.addEventListener('scroll', function(e) {
lastPosition = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
onScroll(lastPosition);
ticking = false;
});
ticking = true;
}
});
})();後は、上記の記述をメモ帳などにコピペして、拡張子を.jsに変更し、任意のファイル名に変更してください。
ここでは、仮にlep.jsとします。これを子テーマディレクトリの任意の階層にアップしましょう。特に拘りが無ければ、style.cssなどと同じく直下で問題ないと思います。
参考にXserver上でのアップロード手順を記載しますが、各自の環境可で子テーマに格納して頂ければ問題ありません。
ここまで完了したら、後は子テーマのfunctions.phpにlep.jsを読み込む記述を施します。
/* その他の読み込みファイルはこの下に記述 */
wp_enqueue_script( 'child_script', get_stylesheet_directory_uri() .'/lep.js', array('jquery'),'1.0',true );＊ご自身の任意.jsと保存先によって記述内容は調整して下さい。
CSSの記述
最後に、カスタマイザーの追加CSSに下記の記述を行えば、導入完了です。
.head-animation {
transform: translateY(-100%);
}もし、ページごとに導入を変えたい場合はSWELLは基本機能でページごとの追加CSS・追加JSが可能なので、そちらで導入してください。
また、引用元のブログに記載されているCSSはヘッダーを自動追従させるものや、ヘッダーそのもののスタイルの記述が中心であるため、その部分は基本的に不要です。
お好みでtransition:は選択してください。私は無い方が好みなので、上記のシンプルなCSSのみで実装しています。
まとめ
SWELLのフォーラムの要望にあった「下スクロールで非表示になり、上スクロールで再表示されるグローバルナビメニュー」を実装しましたが、確かに視覚的に圧迫感はなくなったかもしれません。
もし今後の公式テーマのアップデートで実装されれば不要となりますが、意外と手間をかけずに実装できることが分かったかと思います。引用元のブログ、FirstLayoutさんに感謝ですね。
ただ、フォーラムを見ているとCSSで可能なちょっとした見栄えの調整やプラグインで実装可能な機能まで、テーマの標準機能としてアップグレードを求めている印象を強く受けます。
SWELLはかなりの親切設計で最高のテーマなのは間違いないですが、基本的なWordPressでのWEBサイトづくりのスタンスとして、まず欲しい機能は自分で実装できるように試行錯誤すべきかと思います。
