插件使用總結-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下不給寬度會出現這樣的現象（圖片躲到滾動條以後去了，也許就是我太粗心）

結語：正文內容就到這裏啦~如寫的有問題歡迎你們指正。