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

バビ
バビ

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

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

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

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

※注意

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

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

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

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

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

CSSコードを子テーマのstyle.cssに貼り付ける

ヘッダーが表示された状態のデザインをCSSで設定します。

こちらのサイトの「SANGOでヘッダーメニューを固定する方法」にあるCSSをコピー。

外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

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」ファイルに以下のコードを貼り付けて保存すれば完成です。

コメントを残す

メールアドレスが公開されることはありません。