推薦指數(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指南”狱庇,獲取最新文章。
謝謝~