标签：
一大早浏览博客园时，看到小鹿同学写了一个jquery.pin.js的使用总结，觉得在日常编码过程中用得上，就随着他的总结看了一下，并自己写了个demo。
常见的，一般浏览网页时右侧有个“回到顶部”的字眼或图片，鼠标往下滑动时，这个“回到顶部”一直在浏览器的同一位置，好像钉在那块一样。往常，碰到这个需求时，我都是用：
position: fixed;
代码来实现。看过小鹿同学的博客之后，结合jquery.pin.js的作用，想到确实有那种将某个页面元素钉在某段文本旁边的需求，所以也学习了一下。下面也先介绍下这个插件。
插件官网地址：http://www.bootcss.com/p/jquery.pin，官网包含示例，插件下载地址，且它的设计也挺好看的，是我喜欢的类型（发现了，所有前端相关的官网，基本都蛮好看的），学习起来也很方便。
插件的优势：
1.将某个页面元素 钉 在某个容器里，而不是页面，即超出容器时， 钉的作用就不存在。
2.让某个元素一直挂在某个位置而不管是否滚动条滚动
3.在尺寸小的屏幕上能够自动禁用这种效果。
使用步骤：（直接上自己写的小demo）
<script src="jquery.min.js"></script> <script src="jquery.pin.js"></script>//从github中下载
2. 定义元素，以及css设置，加上jq插件的代码
<div class="main"> <div class="container"> 我们来看看这个有没有被钉住哦？！ </div> </div>
<style> .main{ width: 230px; height: 1200px; background: red; position: relative; } .container{ width: 230px; height: 230px; background: #ffc; padding:20px; position: fixed; box-shadow: 5px 5px 7px rgba(33,33,33,.7); -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg); } </style>
<script> $(function() { $(".container").pin({ containerSelector: ".main" }) }); </script>
来看一下页面效果
未向下滑动时：
当向下滑动时，效果如下：
可以看到向上向下滑动时，这个黄色背景的元素一直被钉在顶部，这个demo可能显示不出这个插件的优势，那么我们再加点东西，html代码如下：
<div class="main"> <div class="container"> 我们来看看这个有没有被钉住哦？！ </div> </div> <div style="height:1000px;background: blue;"></div>
即在容器的下面再添加一个div，高度为1000px，背景色为蓝色，这样效果会显著点。当鼠标下滑到蓝色背景时会发现黄色背景的元素已不在浏览器内，这就解释了这个插件“超出容器时， 钉的作用就不存在”的作用。
截图如下：
以上为个人见解，如有错误请指出！转载请注明出处
标签：
原文地址：http://www.cnblogs.com/dingdong/p/4619351.html
