【Simplicity2】モバイルメニューを上下スクロールで表示・消去するカスタマイズ方法!

Simplicity2 ロゴ

何と言ったらいいのか難しいですが…(^^;)

Simplicity2でモバイル表示をレスポンシブではなく、モバイルメニュータイプをスライドインにしているのですが、現在は上に表示するように設定しています。

ただここで個人的に問題が…

下で固定していたときはさほど気にならなかったのですが、上で固定するとなんだか気になって仕方がありません。そこで、文章を読むために下スクロールする際は消えて、検索やページのトップに戻ろうと上スクロールする際に表示することができないか調べていると、下記のサイトで発見!利用させていただきました。

jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。...

通常上に固定されているモバイルメニューを、jQueryを使用し下スクロールの際は消して、上スクロールの際に表示させる方法です。

スポンサーリンク

概要

ん?どういうこと??

意味がわかりにくいかもしれませんので、このページを一度モバイルで見ていただくとわかりやすいかと思います。

きになるnet
iPhone・MacからWordPressなどのWebに関することまで、きになるものを綴ったブログ

最初にモバイルでページを見ると、上段にメニューが固定されているのですが、文章などを読むために下にスクロールする際に、200px以上下にスクロールしたら消え、ページのトップや検索ページを探そうと上スクロールする際に表示されるという、メニューになります。

親テーマ内のbuttons-footer-mobile.phpを、子テーマにコピーする

まずは、FTPクライアントソフトを使用して親テーマ「simplicity」内にある、buttons-footer-mobile.phpを、子テーマ「simplicity-child」にコピーします。

理由としては、挙動不審な状態になった場合に、子テーマのbuttons-footer-mobile.phpを消せば元に戻るからです。

親テーマのbuttons-footer-mobile.phpをいじって失敗してしまうと、大変なことになってしまうので、子テーマをコピーする方法をおすすめします!

jQueryを追加

次に、コピーをした子テーマのbuttons-footer-mobile.php開きます。

(function($) {
  $(document).ready(function() {

//この間に以下のコードを挿入します

  });
})(jQuery);

下へスクロールし、「フッターモバイルメニューの挙動」下の「この間に以下のコードを挿入します」部分に、以下のコードを挿入します。

//モバイルメニュー(下スクロールで消え上スクロールで出現)
var menuHeight = $("#footer-mobile-buttons").height();
var startPos = 0;
$(window).scroll(function(){
  var currentPos = $(this).scrollTop();
  if(currentPos > startPos) {
    if($(window).scrollTop() >= 200) {
      $("#footer-mobile-buttons").css("top", "-" + menuHeight + "px");
    }
  } else {
    $("#footer-mobile-buttons").css("top", 0 + "px");
  }
  startPos = currentPos;
});

これだけです。

7行目の「200」の数値を変更することで、消えるタイミングを変更できます。現在は200px以上スクロールしたら消えるよう200になっています。

あとがき

これができてどうなんだ!と言われると元も子もないのですが、もし私と同じような気持ちの方がいらして、試していただけたら幸いです(笑)

今度PCページも時間があったらやってみようと思います!

スポンサーリンク
おすすめ記事
おすすめ記事
Written by gozi
iPhone・iPad等のApple製品を中心にWordPressから食べものなど、きになるものを綴っているブログです。