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

バビ

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

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

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

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

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

2020-08-03【WordPress、SANGO】カスタマイズ記事まとめ＆デザインの参考にしているブログ 2020-05-28【SANGO】スマホフッター固定の丸いシェアボタンを設置する 2020-05-27【SANGO】ウィジェット以外の場所にアドセンス広告を設定する方法 2020-05-27【SANGO】シェアボタンをオシャレな丸に変更する。