插件使用总结-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下不给宽度会出现这样的现象（图片躲到滚动条以后去了，也许就是我太粗心）

结语：正文内容就到这里啦~如写的有问题欢迎你们指正。