【jQuery】スクロールをしてスライドをして表示非表示をするメニューやバナー
よく、スマホサイト等であるスクロールをすると下や上にずっとついてくるメニューをjQueryで作成してみました。
ただ、表示するだけではあまり面白くなかったので、スライドアニメーションかつ、スクロール中は非表示にするメニューを作成。
まずは。ソース。
【html】
【CSS】
【jQuery】
まず、広告を設置そしてCSSの position:fixed で固定表示をし bottom:-150px で枠外に出して非表示にします。
jQuery
$(window).on(“scroll touchmove”, function(){ はスクロールした場合のイベントです、一応スマホ、PC両方に対応するために scroll と touchmove を設定しています。
流れは簡単に説明すると
①スクロールをしたら実行
②一時アクションをストップ
③スクロール中は非表示にする。
④スクロールが止まったら表示する。
⑤スクロールのループ中に setTimeout を重複しないように clearTimeout でクリア(最後に④を実行)
という流れ。
.animate の時間を微調整していただくと、動きをお好みなスピードにできます。
導入して気が付いたのですが、スマホの処理能力でスピードが速すぎると処理が追いつかないことがありましたので、ちょっとスピードを早くすると解決しました。
ただ、表示するだけではあまり面白くなかったので、スライドアニメーションかつ、スクロール中は非表示にするメニューを作成。
まずは。ソース。
【html】
<div id="footer">バナーなど</div>
【CSS】
#footer { z-index:9999; width:100%; position:fixed; bottom:-150px; background-color:#999; color:#fff; text-align:center; }
【jQuery】
$(function(){<br /> var fbtArea = $('#footer') ; var timer = false ;<br /> $(window).on("scroll touchmove", function(){ //① <br /> <span style="white-space: pre;"> </span>if(timer !== false){ <span style="white-space: pre;"> </span>clearTimeout(timer); //⑤ <span style="white-space: pre;"> </span>} fbtArea.stop(); //② fbtArea.animate({'bottom' : '-150px'}, 300) ; //③ timer = setTimeout(function() { <span style="white-space: pre;"> </span>console.log('scroll') ; <span style="white-space: pre;"> </span>fbtArea.stop() ; <span style="white-space: pre;"> </span>fbtArea.animate({'bottom' : '0px'}, 300) ; //④ }, 100) ; }); });
まず、広告を設置そしてCSSの position:fixed で固定表示をし bottom:-150px で枠外に出して非表示にします。
jQuery
$(window).on(“scroll touchmove”, function(){ はスクロールした場合のイベントです、一応スマホ、PC両方に対応するために scroll と touchmove を設定しています。
流れは簡単に説明すると
①スクロールをしたら実行
②一時アクションをストップ
③スクロール中は非表示にする。
④スクロールが止まったら表示する。
⑤スクロールのループ中に setTimeout を重複しないように clearTimeout でクリア(最後に④を実行)
という流れ。
.animate の時間を微調整していただくと、動きをお好みなスピードにできます。
導入して気が付いたのですが、スマホの処理能力でスピードが速すぎると処理が追いつかないことがありましたので、ちょっとスピードを早くすると解決しました。
著者:poroa | 投稿日:2016年09月16日 | カテゴリ:jQuery