一大早浏览博客园时，看到写了一个，觉得在日常编码过程中用得上，就随着他的总结看了一下，并自己写了个demo。

　  常见的，一般浏览网页时右侧有个“回到顶部”的字眼或图片，鼠标往下滑动时，这个“回到顶部”一直在浏览器的同一位置，好像钉在那块一样。往常，碰到这个需求时，我都是用：

position: fixed;

代码来实现。看过小鹿同学的博客之后，结合jquery.pin.js的作用，想到确实有那种将某个页面元素钉在某段文本旁边的需求，所以也学习了一下。下面也先介绍下这个插件。

　　插件官网地址：，官网包含示例，插件下载地址，且它的设计也挺好看的，是我喜欢的类型（发现了，所有前端相关的官网，基本都蛮好看的），学习起来也很方便。

　　插件的优势：

　　　　1.将某个页面元素 钉 在某个容器里，而不是页面，即超出容器时， 钉的作用就不存在。

　　　　2.让某个元素一直挂在某个位置而不管是否滚动条滚动

　　　　3.在尺寸小的屏幕上能够自动禁用这种效果。

　　使用步骤：（直接上自己写的小demo）

1. 　　引用js：

//

　　2.　　定义元素，以及css设置，加上jq插件的代码

     
     
      
                 我们来看看这个有没有被钉住哦？！     
      
        
     

　　

 

　　来看一下页面效果

　　未向下滑动时：

　　

 

 

　　当向下滑动时，效果如下：

 

　　

 

　　可以看到向上向下滑动时，这个黄色背景的元素一直被钉在顶部，这个demo可能显示不出这个插件的优势，那么我们再加点东西，html代码如下：

     
            
      
                       我们来看看这个有没有被钉住哦？！            
      
                
     
        
     

　　即在容器的下面再添加一个div，高度为1000px，背景色为蓝色，这样效果会显著点。当鼠标下滑到蓝色背景时会发现黄色背景的元素已不在浏览器内，这就解释了这个插件“超出容器时， 钉的作用就不存在”的作用。

　　截图如下：

　　

 

　　以上为个人见解，如有错误请指出！转载请注明出处