最近是否有發現到yahoo的聯播網廣告，當滾動畫想時，下方就出現廣告鈕，或是廣告BAR，當畫面靜止時，那廣告Banner就會自動的消失，直接使用者再度滾動畫時，則會再顯示出來，這樣的手法相當的特別，除了能吸引瀏覽者的觀注外，同時又能降低畫面的干擾，有別於以往都是採浮動式的固定廣告框，除了干擾閱讀外，也會相當的佔畫面。
因此當梅干看到Yahoo此次的廣告展示手法時，立即吸引梅干的好奇，就隨手試寫看看，不知不覺中就已完成，而梅干也將作法分享出來，因此有需要的朋友，不妨也可參考看看囉！
Step1
首先，先在網頁中，新一個div並將名稱，命名為「popup」。
[html]
<div class="popup">
……放置廣告內容
</div>
[/html]
Step2
接著再把CSS的樣式加入，而這邊只是簡單的底色設定，以及當滑鼠滾動時，加入了簡易的CSS3動畫語法。
[css]
.popup.active {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.popup {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99999999999;
width: 100%;
height: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transform: translateY(100%);
transform: translateY(100%);
cursor: pointer;
}
[/css]
Step3
最後再加入下方的javascript控制碼，而下方的javascript碼中，主要使用了滾動事件與倒數屬性，因此各位只需修改closetime的關閉時間就可以了，而2000＝2秒廣告banner會自動消失。
[javascript]
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var closetime = 2000;//不滾動時，2秒自動消失
var setTimeoutId = null;
var scrolling = false;
jQuery(function($) {
$(window).on(‘scroll’, function() {
scrolling = true;
if (!!setTimeoutId) {
clearTimeout(setTimeoutId);
}
setTimeoutId = setTimeout(function() {
scrolling = false;
}, closetime);
});
setInterval(function() {
$(‘.popup’)scrolling?’addClass’:’removeClass’;
}, 500);
});
</script>
[/javascript]
Step4
完成之後，畫面不滾動時，則保留原來的乾淨的畫面。
Step5
當滾動後，下方就會出現廣告Banner，直到畫面靜止2秒後，banner就會自動消失不見啦！有需要的朋友，就自行拿去使用吧！
[範例預覽]