插件使用總結-jquery.pin.js

小伙伴們，俺昨天用了jquery.pin.js這個插件,發現了一些自以為是的使用問題。特此做個總結哈。

1.獲取:

下載地址:  http://www.bootcss.com/p/jquery.pin/ 其中有用法和案例

Github地址: https://github.com/webpop/jquery.pin

2.作用

1. 將某個頁面元素釘在某段文本旁邊；
2. 某個元素一直掛在某個位置而不管是否滾動條滾動；
3. 在尺寸小的屏幕上能夠自動禁用這種效果。

注：和fixed屬性比較，用它固定的子元素的作用域只在父元素內部——如果頁面很長，父元素只是頁面的其中一段，當父元素滾出頁面以后，子元素會隨着父元素滾動出去。

3.用法

 

“釘”住某個元素：

$(".pinned").pin()

將某元素“釘”在容器內

$(".pinned").pin({ containerSelector: ".container"
})

在小尺寸的屏幕上禁用Pin效果

$(".pinned").pin({  minWidth: 940
})

4.例子(發生的小case)

html部分：

jquery部分：使用前當然要先加載好jquery。

css部分：要達到的效果是將二維碼固定在屏幕右側。滾動條滾動固定位置不變。

 開始css加在了.erweima上，如下：

.erweima{
    position: absolute;
    width: 130px;
    right: 20px;
    top: 40px;
    z-index: 20;

  }

 

 

 

發現滾到頁面底部多出了一塊兒空白區域。和高度相等。覺得不可能這樣啊。

然后發現了這個：

頁面運行之后子元素.erweima外又新增了一個容器.pin-wrapper所以css改為：

.pin-wrapper{
    position: absolute;
    width: 130px;/*重要*/
    right: 20px;
    top: 40px;
    z-index: 20;

  }

 

 

 

*寬度重要原因是在IE下不給寬度會出現這樣的現象（圖片躲到滾動條之后去了，也許就是我太粗心）

結語：正文內容就到這里啦~如寫的有問題歡迎大家指正。