Waypoints使用方法

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

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

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

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

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

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

這里通知將表現為”Direction example triggered scrolling down”或者”Direction example triggered scrolling up”.

要是你是想讓waypoint在某個位置觸發而不是你元素的頂部碰到視角的頂部怎么辦？waypoint函數提供了第二種自變量?選項對象。其中最有用的是?offset，即告訴Waypoints要離開窗口頂部多遠才觸發。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%' });

或者是一個函數，這個函數需要返回一個數字

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