Jquery.pin是一個(gè)能夠設(shè)置固定元素的jQuery插件。使用這個(gè)插件,你可以方便地將一個(gè)元素釘在瀏覽器窗口、容器或指定元素內(nèi)的位置上。
使用方法:
//引入jQuery和jquery.pin插件 <script src="jquery.js"></script> <script src="jquery.pin.js"></script> //在HTML標(biāo)簽中定義需固定的元素和釘定位置的容器 <div class="container"> <div class="pin">固定元素</div> </div> //使用Jquery.pin插件 $('div.pin').pin({ containerSelector: '.container' //設(shè)置容器的選擇器 });
除了containerSelector,Jquery.pin還提供了以下可選參數(shù):
- activeClass:當(dāng)元素固定時(shí)添加的CSS類名
- padding:固定元素到容器邊緣的距離,可以是一個(gè)數(shù)值或包含top、right、bottom、left屬性的對(duì)象
- minWidth:最小寬度,在窗口寬度小于此值時(shí)不釘(默認(rèn)為0)
- containerMinHeight:容器的最小高度,當(dāng)容器高度小于此值時(shí)不產(chǎn)生固定效果(默認(rèn)為0)
- containerSelector:容器的選擇器,可以是一個(gè)選擇器字符串或返回容器元素的函數(shù)
- onPin:元素固定時(shí)的回調(diào)函數(shù)
- onUnpin:元素從容器中移除時(shí)的回調(diào)函數(shù)
以上是使用Jquery.pin的基本方法和參數(shù),可以根據(jù)具體需求自由地組合使用。