何と言ったらいいのか難しいですが…(^^;)
Simplicity2でモバイル表示をレスポンシブではなく、モバイルメニュータイプをスライドインにしているのですが、現在は上に表示するように設定しています。
ただここで個人的に問題が…
下で固定していたときはさほど気にならなかったのですが、上で固定するとなんだか気になって仕方がありません。そこで、文章を読むために下スクロールする際は消えて、検索やページのトップに戻ろうと上スクロールする際に表示することができないか調べていると、下記のサイトで発見!利用させていただきました。
参照jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
通常上に固定されているモバイルメニューを、jQueryを使用し下スクロールの際は消して、上スクロールの際に表示させる方法です。
概要
最初にモバイルでページを見ると、上段にメニューが固定されているのですが、文章などを読むために下にスクロールする際に、200px以上下にスクロールしたら消え、ページのトップや検索ページを探そうと上スクロールする際に表示されるという、メニューになります。
親テーマ内のbuttons-footer-mobile.phpを、子テーマにコピーする
まずは、FTPクライアントソフトを使用して親テーマ「simplicity」内にある、buttons-footer-mobile.phpを、子テーマ「simplicity-child」にコピーします。
理由としては、挙動不審な状態になった場合に、子テーマの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ページも時間があったらやってみようと思います!