相信很多朋友看見到過這樣的效果，當(dāng)滾動頁面的時(shí)候，頁面中的某些元素會在一定的距內(nèi)定住，滾出一定距離后又隨著滾動退出視窗范圍。今天介紹的這款Sticky-Kit jquery插件就可以輕松的實(shí)現(xiàn)此效果，并且功能強(qiáng)大，使用簡單，兼容主流瀏覽器包括IE7。
jquery實(shí)例：Sticky-Kit的使用方法
引入核心文件
1 2 | <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script><script src="jquery.sticky-kit.js"></script> |
html可隨意布局，只需用jquery選擇器選中需要實(shí)現(xiàn)粘性滾動的元素即可。以下代碼為實(shí)例1的代碼
1 2 3 4 5 6 | <h1>Variable</h1><div class="container one"> <div class="item"></div> <div class="item half"></div> <div class="item full"></div></div> |
JS實(shí)現(xiàn)效果
1 | $(".container .item").stick_in_parent(); |
參數(shù)
1 | $("#sticky_item").stick_in_parent(options) |
通過一個(gè)散列的選項(xiàng)來配置粘性元素的參數(shù)。以下選項(xiàng),每一個(gè)都是可選的:
parent 粘性元素的父元素，默認(rèn)為最近粘性元素的元素。
inner_scrolling 內(nèi)部滾動，默認(rèn)值為true
sticky_class 當(dāng)元素發(fā)生粘性時(shí)添加的樣式，默認(rèn)值is_stuck
offset_top 以像素為單位，初始化粘性元素位置的偏移量，可以是正值和負(fù)值。
spacer 間隔，默認(rèn)使用插件自動創(chuàng)建的間隔
bottoming 判斷元素是否到底部，默認(rèn)值為true
recalc_every 自動重新計(jì)算每個(gè)鉤號之間的數(shù)值，默認(rèn)為不調(diào)用計(jì)算
事件
sticky_kit:stick 在元素（卡住）變成粘性時(shí)觸發(fā)
sticky_kit:unstick 在元素（不卡）去除粘性去觸發(fā)
sticky_kit:bottom 在元素底部時(shí)觸發(fā)
sticky_kit:unbottom 沒到元素底部時(shí)觸發(fā)
演示代碼
1 2 3 4 5 6 7 | $("#sticky_item").stick_in_parent() .on("sticky_kit:stick", function(e) { console.log("has stuck!", e.target); }) .on("sticky_kit:unstick", function(e) { console.log("has unstuck!", e.target); }); |
監(jiān)聽document.body事件
sticky_kit:recalc 觸發(fā)這個(gè)事件導(dǎo)致重新計(jì)算粘性的所有元素。
監(jiān)聽粘性元素事件
sticky_kit:detach 去除元素的粘性，并把元素恢復(fù)到原始位置
1 | $("#sticky_item").trigger("sticky_kit:detach"); |
如果你通過刪除、添加或調(diào)整改變動態(tài)頁面的標(biāo)記元素，然后你最有可能需要重新計(jì)算粘性元素來保證他們正確定位。
您可以手動觸發(fā)document.body重新計(jì)算。
1 | $(document.body).trigger("sticky_kit:recalc") |
更具體的參數(shù)請參考官方網(wǎng)站
轉(zhuǎn)載請注明：jQ酷 ? 實(shí)現(xiàn)粘性滾動的jquery插件Sticky-Kit
