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，背景色為藍色，這樣效果會顯著點。當鼠標下滑到藍色背景時會發現黃色背景的元素已不在瀏覽器內，這就解釋了這個插件“超出容器時， 釘的作用就不存在”的作用。

　　截圖如下：

　　

 

　　以上為個人見解，如有錯誤請指出！轉載請注明出處