相信很多朋友看見(jiàn)到過(guò)這樣的效果,，當(dāng)滾動(dòng)頁(yè)面的時(shí)候,，頁(yè)面中的某些元素會(huì)在一定的距內(nèi)定住，滾出一定距離后又隨著滾動(dòng)退出視窗范圍,。今天介紹的這款Sticky-Kit jquery插件就可以輕松的實(shí)現(xiàn)此效果,，并且功能強(qiáng)大，使用簡(jiǎn)單,，兼容主流瀏覽器包括IE7,。

jquery實(shí)例：Sticky-Kit的使用方法

引入核心文件

html可隨意布局，只需用jquery選擇器選中需要實(shí)現(xiàn)粘性滾動(dòng)的元素即可,。以下代碼為實(shí)例1的代碼

JS實(shí)現(xiàn)效果

參數(shù)

通過(guò)一個(gè)散列的選項(xiàng)來(lái)配置粘性元素的參數(shù),。以下選項(xiàng),每一個(gè)都是可選的:

parent 粘性元素的父元素，默認(rèn)為最近粘性元素的元素,。

inner_scrolling 內(nèi)部滾動(dòng),，默認(rèn)值為true

sticky_class 當(dāng)元素發(fā)生粘性時(shí)添加的樣式，默認(rèn)值is_stuck

offset_top 以像素為單位,，初始化粘性元素位置的偏移量,，可以是正值和負(fù)值。

spacer 間隔，默認(rèn)使用插件自動(dòng)創(chuàng)建的間隔

bottoming 判斷元素是否到底部,，默認(rèn)值為true

recalc_every 自動(dòng)重新計(jì)算每個(gè)鉤號(hào)之間的數(shù)值,，默認(rèn)為不調(diào)用計(jì)算

事件

sticky_kit:stick 在元素（卡住）變成粘性時(shí)觸發(fā)

sticky_kit:unstick 在元素（不卡）去除粘性去觸發(fā)

sticky_kit:bottom 在元素底部時(shí)觸發(fā)

sticky_kit:unbottom 沒(méi)到元素底部時(shí)觸發(fā)

演示代碼

監(jiān)聽(tīng)document.body事件

sticky_kit:recalc 觸發(fā)這個(gè)事件導(dǎo)致重新計(jì)算粘性的所有元素,。

監(jiān)聽(tīng)粘性元素事件

sticky_kit:detach 去除元素的粘性,，并把元素恢復(fù)到原始位置

如果你通過(guò)刪除、添加或調(diào)整改變動(dòng)態(tài)頁(yè)面的標(biāo)記元素,，然后你最有可能需要重新計(jì)算粘性元素來(lái)保證他們正確定位。

您可以手動(dòng)觸發(fā)document.body重新計(jì)算,。

更具體的參數(shù)請(qǐng)參考官方網(wǎng)站

轉(zhuǎn)載請(qǐng)注明：jQ酷 ? 實(shí)現(xiàn)粘性滾動(dòng)的jquery插件Sticky-Kit