【SANGO】スマホで上にスクロールしたらヘッダーを表示する

バビ

ごきげんよう、ブログ書こうと思って気が付くとCSSをいじってます、バビです。

今回は、下にスクロールすると消えて、上にスクロールすると表示されるヘッダーのカスタマイズです。

言葉だとよく分からないので、以下のサンプル動画で実際の動きを確認してください。

このタイプのヘッダーをよく見かけていて、ユーザーの邪魔にもなりにくいのでSANGOでも導入できないかと思いカスタマイズしてみました。

※注意

FTP（ファイルマネージャー）を操作する必要があり、操作を誤るとサイトが動作しなくなる場合があります。
バックアップをとり、慎重に操作してください。

SANGOでJavascriptを読み込めるようにする

WordPressは、通常そのままではJavascriptを読み込めません。

ですが、SANGOでは「Javascriptを使いたい」というユーザーのために、簡単に対応できる方法が用意されています。（ほんと凄い！）

以下のページを見ながらJavascriptを読み込ませるための設定を行ってくだい。

カスタマイズでJavaScriptを利用する方法

WordPress5.5以降の場合は、JavaScriptを読み込むために以下の手順も必要です。

WordPress5.5とSANGO v2.0.6へのアップデートの注意点

JavaScriptをscripts.jsに貼り付ける

$(function() {
 var $win = $(window),
     $header = $('.header'),
     headerHeight = $header.outerHeight(),
     startPos = 0;

 $win.on('load scroll', function() {
   var value = $(this).scrollTop();
   if ( value > startPos && value > headerHeight ) {
     $header.css('top', '-' + headerHeight + 'px');
   } else {
     $header.css('top', '0');
   }
   startPos = value;
 });
});

最初に作成した「scripts.js」ファイルに以下のコードを貼り付けて保存すれば完成です。

参考 jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5