jq的“钉”插件--jquery.pin.js

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

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

position: fixed;

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

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

　　插件的优势：

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

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

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

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

1. 　　引用js：

<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，背景色为蓝色，这样效果会显著点。当鼠标下滑到蓝色背景时会发现黄色背景的元素已不在浏览器内，这就解释了这个插件“超出容器时， 钉的作用就不存在”的作用。

　　截图如下：

　　

 

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

转载于:https://www.cnblogs.com/dingdong/p/4619351.html