jQuery 幾款比較棒的外掛程式

標籤：簡單   情況   返回   方向   功能   事件   stc   同方   offset   

jQuery滾動監聽外掛程式Waypoints 部落格分類：

• Javascript /Jquery / Bootstrap / Web

 

你是否希望當使用者僅僅滾動滑條的時候，就能觸發各種各樣的動態效果呢？比片浮現、文字漂移等各種各樣的動畫！那麼我就推薦你一款用於捕獲各種滾動事件的外掛程式—Waypoints。同時Waypoints還支援固定元素和無限滾動的功能，功力十分強大。

 

目前這款外掛程式已經更新到v2.0.3的版本。

示範Demo：
1.http://imakewebthings.com/jquery-waypoints/#get-started
2.固定元素http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/
3.無線滾動http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

 

下載：
1.官網：http://imakewebthings.com/jquery-waypoints/
2.GiHub：https://github.com/imakewebthings/jquery-waypoints

 

在使用Waypoints外掛程式之前，首先需要包含一個jQery檔案，然後包含下載的外掛程式

Html代碼  

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

 

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

Js代碼  

1. $(‘#example-basic‘).waypoint(function() {  
2.   notify(‘Basic example callback triggered.‘);  
3. });  

 

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

Js代碼  

1. $(‘#example-direction‘).waypoint(function(direction) {  
2.   notify(‘Direction example triggered scrolling ‘ + direction);  
3. });  

 

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

 

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

Js代碼  

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

 

或者用比例來表示

Js代碼  

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

 

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

Js代碼  

1. $(‘#example-offset-function‘).waypoint(function() {  
2.   notify(‘Element bottom hit window top‘);  
3. }, {  
4.   offset: function() {  
5.     return -$(this).height();  
6.   }  
7. });  

 

來源：http://coolfun.me/waypoints/

jQuery 幾款比較棒的外掛程式