jQuery滾動監(jiān)聽插件Waypoints

Waypoints使用方法

在使用Waypoints插件之前，首先需要包含一個jQery文件，然后包含下載的插件

<script src="/path/to/jquery.min.js"></script>  
<script src="/path/to/waypoints.min.js"></script>

這個時候你就可以盡情的使用Waypoints插件了, 最簡單的使用方法是調(diào)用.waypoint，并傳遞到一個函數(shù)中

$('#example-basic').waypoint(function() {  
      notify('Basic example callback triggered.');  
});

這個例子會在#example-basic的頂部剛碰到用戶視角的頂部時出現(xiàn)一個提示，callback會在你經(jīng)過這點設(shè)定點觸發(fā)，不管你是向上滾 動還是向下滾動. 大部分情況下我們想在用戶向不同方向滾動時展現(xiàn)不同的動作。Waypoints將方向作為參數(shù)傳遞給回調(diào)函數(shù)

$('#example-direction').waypoint(function(direction) {  
      notify('Direction example triggered scrolling ' + direction);  
});

這里通知將表現(xiàn)為”Direction example triggered scrolling down”或者”Direction example triggered scrolling up”.

要是你是想讓waypoint在某個位置觸發(fā)而不是你元素的頂部碰到視角的頂部怎么辦？waypoint函數(shù)提供了第二種自變量?選項對象。其中最有用的是?offset，即告訴Waypoints要離開窗口頂部多遠(yuǎn)才觸發(fā)。offset可以用像素來表示。

$('#example-offset-pixels').waypoint(function() {  
      notify('100 pixels from the top');  
}, { offset: 100 });

或者用比例來表示

$('#example-offset-percent').waypoint(function() {  
     notify('25% from the top');  
}, { offset: '25%' });

或者是一個函數(shù)，這個函數(shù)需要返回一個數(shù)字

$('#example-offset-function').waypoint(function() {  
      notify('Element bottom hit window top');  
    }, {  
      offset: function() {  
        return -$(this).height();  
    }  
});