整理了網上的代碼，可以用作廣告提示等，當頁面向下滾動時提示隱藏，當頁面向上滾動時提示出現，pc端和手機端都可以使用哦~
/*********************** * 函數：判斷滾輪滾動方向 * 參數：event * 返回：滾輪方向 1：向上 -1：向下 *************************/ var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDelta) { direct = e.wheelDelta > 0 ? 1 : -1; } else if (e.detail) { direct = e.detail < 0 ? 1 : -1; } isShow(direct); } function isShow(direct) { if (direct == 1) { //向上顯示 $("#guanzhuweixin-s").fadeIn(); var winH = $(document).height(); } else { //向下隱藏 $("#guanzhuweixin-s").fadeOut(); } } //全局變量，觸摸開始位置 var startX = 0, startY = 0; //touchstart事件 function touchSatrtFunc(evt) { try { var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X坐標 var y = Number(touch.pageY); //頁面觸點Y坐標 //記錄觸點初始位置 startX = x; startY = y; } catch (e) { alert('touchSatrtFunc：' + e.message); } } //touchmove事件，這個事件無法獲取坐標 function touchMoveFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X坐標 var y = Number(touch.pageY); //頁面觸點Y坐標 if (y - startY > 0) { //向下滑 $("#guanzhuweixin-s").fadeIn(); } else { //向上滑 $("#guanzhuweixin-s").fadeOut(); } } catch (e) { alert('touchMoveFunc：' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 //var text = 'TouchEnd事件觸發'; //document.getElementById("result").innerHTML = text; } catch (e) { alert('touchEndFunc：' + e.message); } } //綁定事件 function bindEvent() { document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判斷是否支持觸摸事件 function isTouchDevice() { try { document.createEvent("TouchEvent"); bindEvent(); //綁定事件 } catch (e) { //不支持TouchEvent事件！ if (document.addEventListener) { document.addEventListener('DOMMouseScroll', scrollFunc, false); }//W3C window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/jquery.min.js"></script> <script src="../js/page/showDiv.js"></script> <title> 顯示隱藏模塊</title> <style> #guanzhuweixin-s { position: fixed; bottom: 10px; margin: 0 auto; width: 95%; height: 55px; padding: 10px 0; background-color: rgba(255,255,255,0.5); } #guanzhuweixin-s .gzbtn-s { display: block; width: 100%; height: 35px; line-height: 35px; text-align: center; background-color: #00a9eb; color: #fff; border-radius: 5px; text-decoration: none; } </style> </head> <body> <div> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> <h3>這是內容</h3> </div> <div id="guanzhuweixin-s"> <a class="gzbtn-s"href="html/guanzhu.html">關注無線微信號，申請免費名額</a> </div> <script> isTouchDevice(); </script> </body> </html>
原鏈接：http://www.thinksaas.cn/group/topic/343918/