jQueryスクロールすると画面上部にヒョコっと現れるメニューをjQueryで実装してみます!CSSを調節すればスマートフォン用のwebサイトにも使えるので、キャンペーンページとかクーポンとかセールとか、強引な導線設計にもってこいなデザインです。今回はユーザーに気を配って時間経過による非表示機能を実装しようと思います!かんたん!スクロールするとスライドインするナビを自動で非表示にするjQueryのsetTimeout()とclearTimeout()まずはHTMLを準備します。#ccf;}/*スライドダウンメニュー*/.slidedown{/*幅は任意で。#fde;}メニューをjQueryで非表示にする前のHTMLだけのデモ上部のメニュー.slidedownが、最初は隠れているけれどスクロールした量に応じて上から降りてくるイメージです。画面にフィックスさせるためにposition:fixed;top:0;この2点は必須で、幅は任意で調節してください。このタイプのUIなら横幅いっぱいに領域が広がっていたほうが美しい気がします。わかりやすくするためにメニューを隠していませんが、実装を始めるにあたりdisplay:noneを書き足しましょう。}12345678910111213141516/*スライドダウンメニュー*/.slidedown{/*幅は任意で。none;}では、jQueryを書いていきます。.on()で、スクロールしたときにメニューをスライドダウンさせるjQueryもちろん、jQueryライブラリを読ませておいてください。){slideMenu.slideDown('slow');}});});//テスト用と書いてある行は、今回、特に動作に影響しません。スクロールするとメニューが出てくるだけのデモ4行目、6行目ぐらいの変数に注目してください。これらがメニューが出現するタイミングを設定する役目を果たしています。変数contHeightはbodyの高さを取得しています。えラボBlogそのbodyの高さを5で割った値が$Limitです。コンテンツの1/5までスクロールしたらメニューが出るようにしています。ここは5でなくても、3で割ってもいいです。割る値が大きければ大きいほど、数値が小さくなるので、のちにメニューが降りてくるポイントが早くなるということです。次にこの辺りですが、ここでスクロール時に起こるイベントを設定しています。){slideMenu.slideDown('slow');}});$scrollValueはウィンドウ上部からのスクロール値を代入しています。iwb.jpそのスクロール値が、先ほどの$Limit(コンテンツ高さの1/5)よりも大きくなった時に、「slideMenu.slideDown(‘slow’)」処理が行われます。ここでメニューを表示させています。速い方がいいという方は、(‘slow’)を(‘fast’)に変えてください。先ほどのjQueryの記述だと、全体の1/5スクロールし終えた際にメニューが出っぱなしです。これはだらしない!という方は、if(){~}に続けて、else{~}を記述します。){//出てくるslideMenu.slideDown('slow');}else{//戻るslideMenu.slideUp('slow');}これはif()の条件に当てはまらなかったときの処理ですので、今回の場合は、”全体の1/5よりもスクロール値が少ない場合”ということになります。スクロール値は画面上部から、スクロールが始まる度に加減して数えているので、”全体の1/5よりもスクロール値が少ない場合”はslideUp()処理が行われます。日本語リファレンスこれにより、メニューが上へ引っ込みます。同時に、display:noneとなります。スクロールするとメニューが出てきて、上にスクロールして戻るとメニューが引っ込んで非表示になるデモsetTimeout()とclearTimeout()で、時間差で表示になるメニューにする現在、ページの下にいるときにずっと上部にメニューが出ている状態です。ページ全体の長さに対し1/5以内に収まってる時にのみ、メニューが隠れます。次は、一定時間の経過でメニューが閉じるようにします。スクリプトを書き換えます。function(){~})前後が変わっています。false;を定義しています。スクロールイベント中は、変動しない変数は定義したくないですしね。進んで、以下の箇所が更にポイントです。3000);変数slideUpTimerがfalseでないとき、つまり、値が入っているとき、clearTimeoutが実行されます。clearTimeout:ITproこれでslideUpTimerの処理をクリアしています。そのすぐ後のifは先ほどと同じで、スクロールの量に応じメニューを出す処理です。最後に、slideUpTimerに関数を代入しています。setTimeoutという関数を使っています。これは、setTimeout内の処理を指定した時間だけ遅らせて実行する、という関数です。一定時間で繰り返す(setTimeout)-JavaScript入門slideMenuが、3秒後(3,000ミリ秒)にslideUpするという処理をslideUpTimerに入れておきます。上記のコードに【1】~【3】まで番号が振ってありますが、この順に実行されるんですね。function(){~})内の記述であるため、ピクリとでもスクロールされた瞬間に【1】~【3】が実行されるのです。【1】~【2】を行ったり来たりするわけなのです。【3】の処理を行いたい、3秒後にメニューを閉じたい場合には、スクロールを止めるしか無いのです。){//【2】出てくるslideMenu.slideDown('slow');}else{//スクロール値が規定に見たない場合に処理したいならこちら//slideMenu.slideUp('slow');}必要に応じてelse処理でメニューを引っ込ませて非表示にしてもいいのですが、なかなか慌ただしかったのでコメントアウトしています。いかがでしょう?結構簡単ですよね。便利なUIだと思います。音楽Profile東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。