推薦指數(shù)：★★★☆
使用難度：★
適用范圍：需要將某個(gè)元素“釘”在網(wǎng)頁(yè)上的時(shí)候勤庐，比如側(cè)邊欄
GitHub數(shù)據(jù)：
乍一看可能大家不太清楚這個(gè)庫(kù)到底是干嘛的脯倚，這里我簡(jiǎn)單用文字描述一下吧。
這個(gè)庫(kù)可以把父元素的某個(gè)子元素固定在網(wǎng)頁(yè)上，也就是說(shuō)葱峡，當(dāng)你滾動(dòng)滾輪的時(shí)候，父元素會(huì)正常向下滾動(dòng)龙助，但是被固定的子元素會(huì)一直在同一個(gè)位置砰奕。
和直接用fixed屬性固定相比蛛芥，這個(gè)庫(kù)的特點(diǎn)是被固定的子元素的作用域只在父元素內(nèi)部。什么意思呢军援？我們還是用剛才的例子說(shuō)仅淑，假如頁(yè)面很長(zhǎng)，那么當(dāng)你把父元素滾動(dòng)出屏幕之后胸哥，子元素也會(huì)被滾動(dòng)出去涯竟。也就是說(shuō)在父元素的顯示范圍內(nèi)子元素被固定了，但是當(dāng)父元素移出屏幕時(shí)候子元素也同樣會(huì)被移出空厌。
還有一個(gè)亮點(diǎn)就是這個(gè)庫(kù)會(huì)自動(dòng)檢測(cè)屏幕大小庐船，如果屏幕太小的話會(huì)自動(dòng)取消固定元素，防止影響閱讀效果嘲更。
如果還是不太明白的話筐钟，建議大家看一下官方首頁(yè)的效果，就一目了然了赋朦。
一句話講解原理：通過(guò)檢測(cè)滾動(dòng)事件控制被固定元素的位置篓冲。
效果截圖：
大家可以看到，左側(cè)的深色框就是導(dǎo)航欄宠哄，滾動(dòng)頁(yè)面的時(shí)候會(huì)固定在同一個(gè)位置纹因。
缺點(diǎn)：
對(duì)HTML的功底有一些要求，需要自己設(shè)計(jì)好頁(yè)面結(jié)構(gòu)琳拨。
一段代碼教程：
$(".pinned").pin()
還是那么簡(jiǎn)單明了~~相信大家都懂了。
如果大家覺(jué)得這篇文章還過(guò)得去的話請(qǐng)動(dòng)動(dòng)手指分享一下吧~你們的支持就是我最大的動(dòng)力屯曹！
歡迎掃描二維碼關(guān)注我的微信號(hào)“GitHub不完全裝B指南”狱庇，獲取最新文章。
謝謝~
