よく、スマホサイト等であるスクロールをすると下や上にずっとついてくるメニューを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　の時間を微調整していただくと、動きをお好みなスピードにできます。

導入して気が付いたのですが、スマホの処理能力でスピードが速すぎると処理が追いつかないことがありましたので、ちょっとスピードを早くすると解決しました。