Jquery on scroll 事件


AJframe-簡單執行on scroll 滑鼠滾動事件

常常在閱覽網站時發現當我們執行滾動後,會出現一些漂亮的事件~
這邊就來教你怎樣做這樣的判斷~
首先我們引用Jquery
<script language="JavaScript" type="text/javascript" src="js/jquery-1.12.2.js"></script>
接下來我們可以寫入以下的案例來演示
onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     if (scrollTop > 50) {
         do something//
     } else {
         do something//
    }
這邊我們使用了scrollTop來做動作,宣告了在這function裡面,scrollTop去依據元素body的scrollTop 來做動作.
如果捲軸滾動大於 50px,去執行 if 裡面的事件
否則就執行 else裡的事件

alert試試看

onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     if (scrollTop > 50) {
         alert('on');
     } else {
         do something//
    }
執行看看,當我們捲動超過50px 高度時,是不是就彈出一個視窗顯示on了呢?

再加點效果試試

onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     if (scrollTop > 50) {
         $('p').hide();
     } else {
         $('p').show();
    }
在body裡面新增加標籤:
<body>
  <div class="warp">
    <p>hello!</p>
  </div>
</body>

在css 裡面我們給warp一個暫時的高度,好讓你能產生捲軸做測試
.warp { height:2000px;}
執行看看~捲軸滾動50px後p是不是就不見了!
再往回滾動後,p是不是就出現了!
更進一步應用我們可以參考 animation Header教學

留言

熱門文章