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();
}
});
