jquery滾動監聽插件waypoints


waypoints:用於捕獲各種滾動事件的插件&&還支持固定元素和無限滾動的功能,功力十分強大。

Waypoints使用方法:step1:下載waypoints插件(import path)

<script src="jquery.min.js"></script>  

<script src="waypoints.min.js"></script>

 

示例一:

    The simplest case:這個例子會在 #pointElement的頂部 剛碰到用戶視角的頂部時出現一個提示,

     callback會在你經過這點設定點觸發,不管你是向上滾 動還是向下滾動.

 

 

$('#pointElement').waypoint(function(){  

  notify('Basic example callback triggered.'); //提示內容 

});

 

 大部分情況下我們想在   用戶向不同方向滾動時展現不同的動作。

                 Waypoints將方向(direction)作為參數傳遞給回調函數

 

$('#pointElement').waypoint(function(direction){  

   notify('Direction example triggered scrolling ' + direction);  

});   //這里通知將表現為”Direction example triggered scrolling down”或者”Direction example triggered scrolling up”

 

 

 

  If: waypoint在某個位置觸發而不是你元素的頂部碰到視角的頂部怎么辦?

      waypoint函數提供了第二種自變量?

        (選項對象)其中最有用的是=>offset,即告訴Waypoints要離開窗口頂部多遠才觸發。offset可以用像素&&百分比來表示。

 

 

$('#pointElement').waypoint(function(){  

      notify('100 pixels from the top');  

},{ offset: 100 });

 

   percent表示:

$('#pointElement').waypoint(function(){  

     notify('25% from the top');  

},{ offset: '25%' });

 

  &&:

 

$('#pointElement').waypoint(function(){  

      notify('Element bottom hit window top');  

    },{  

      offset: function(){  

        return  $(this).height();  

    }  

});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM