2017-05-04

スクロール中は非表示になるナビゲーションメニュー

はじめに

最近、サイト製作の際に、スマホ用の表示画面の時は画面下部にメニューバーを固定して表示する、というデザインに遭遇しました。至ってありがちな構成だとは思いますが、気になったのは常に表示され続けていること。スマホの画面も大きいように見えて小さいですから、たとえ数十ピクセルでも常に占有されれば狭く感じてしまいます。普通、スクロール中は非表示になったりするよなあーと思い、JQueryを使用して作ってみたので、その方法について書いておきたいと思います。

JQueryでメニューバーを追従させる

とはいっても内容は簡単で、スマホでのスクロールイベントが発生した時にメニューを非表示にして、止まったら間を挟んでフェードインさせるだけです。実際の動作はこんな感じです。

画面スクロールで非表示になるボトムメニュー

スクロール中は消えて、止まるとちゃんとメニューが表示されます。以下がJQueryのソースコードです。

JQueryは、モバイル以下の時のみを対象にしているので768px以下の画面幅の時のみ動作するようにしています。また、scrollイベントではなく、モバイル用のtouchmoveイベントを使用しています。

本当は消える瞬間もフェードアウトさせたかったのですが、display:noneからfadeOut('fast')にすると、

画面スクロールで非表示になるボトムメニュー、fadeOutの場合

このように、なぜか明滅を繰り返してしまうので諦めました。

さいごに

モバイルサイトの表現も色々あり、まだまだ発展途上だと思います。今回紹介した方法が最善だとは思いませんが、よりよりウェブ製作の表現に役立てて貰えれば嬉しいです。とはいっても、たぶん他の誰かがすでに紹介していると思いますので、忘れていた方への再認識、ということで。



コメントする(※は必須項目です)













画像認証