web creating

POROA

【jQuery】スクロールをしてスライドをして表示非表示をするメニューやバナー

よく、スマホサイト等であるスクロールをすると下や上にずっとついてくるメニューをjQueryで作成してみました。

ただ、表示するだけではあまり面白くなかったので、スライドアニメーションかつ、スクロール中は非表示にするメニューを作成。
まずは。ソース。

【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
  • ■同じカテゴリの記事
  • ■よく見られている記事
■最新記事
■カテゴリ一覧
CSS
Excel
Google Analytics
HTML
jQuery
PHP
SEO
WordPress
ホームページ作成
ホームページ作成講座
未分類
楽天
■アーカイブ
2018年9月
2016年12月
2016年11月
2016年10月
2016年9月
2016年8月
■ランキング