Blog

スマホ(iPhoneのsafari)のようにナビをスクロールの方向によって表示したり非表示にしたりする

2015.07.07Cat:jQuery デザイナー

私はiPhoneユーザーなのですが、safariの下部にあるメニューって下へスクロールする時は消え、上へスクロールしている時は表示されてますよね?

PCのページにもそのようなメニューが増えてきているとは思います。

そこで試しに作ってみました。

早速ですが、DEMOをご覧ください!

DEMO

jQueryとcss3で実装しています。

ソース

html

css

jQuery

考え方としては、
動かす前とスクロールの値と動かした直後のスクロールの値を比較して、
直後の値が大きければ非表示(下方向)、
前の値が大きければ表示(上方向)、
といった形になります。

読み進めている時は、メニューを消して、
戻ろうかなと思った時にメニューを表示するといった形になるので、
コンテンツを読むユーザーに沿った機能になると思います。

今後この形が当たり前のように実装されていくかもしれませんね!

参考ブログ:
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー|Webpark

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ