當(dāng)然度秘,大家都挺忙,直接說(shuō)目前我在用的方案饵撑、調(diào)用方式以及源碼剑梳,然后再擴(kuò)展的說(shuō)!
方案:scrollfix.js
推薦理由:可指定元素滑潘,可指定高度垢乙,可指定位置,可指定跟蹤元素语卤,還想怎樣杨箭?頂多也就差個(gè)animate.css使它更酷炫了寓辱。
應(yīng)用實(shí)例:找前輩網(wǎng)前輩詳情頁(yè)-左右導(dǎo)航
調(diào)用方式:$("#fix").scrollFix({
startTop:"#startTop",
distanceTop:20,
endPos:"#footer"
});
源碼下載:
參考演示:
http://www.jq22.com/yanshi9192
參數(shù)說(shuō)明:
參數(shù)名字參數(shù)值參數(shù)作用
startTopnull開(kāi)始固定的jquery對(duì)象的頂部
startBottomnull開(kāi)始固定的jquery對(duì)象末端,兩個(gè)參數(shù)都設(shè)置的話,默認(rèn)后面參數(shù)生效
distanceTop0/null數(shù)值娘扩,距離頂部的高度,可以為高度或者jquery對(duì)象
endPosnull/0距離底部的高度寺渗,可以為高度或者jquery對(duì)象
bottom-1默認(rèn)不使用位置為bottom的值大猛,當(dāng)設(shè)置為0,將會(huì)停在窗口底端
zIndex0當(dāng)沒(méi)有設(shè)置這個(gè)值時(shí)柠偶,將默認(rèn)使用元素的css z-index值
baseClassName'scrollfixed'當(dāng)元素開(kāi)始固定時(shí)給它添加一個(gè)class情妖,你可以設(shè)置為你喜歡的類名。
1诱担、startTop:null
不設(shè)置:鼠標(biāo)滾動(dòng)毡证,指定元素開(kāi)始滾動(dòng)則開(kāi)始浮動(dòng)。
設(shè)置:如startTop:"#startTop"蔫仙,則到了#startTop頂部開(kāi)始浮動(dòng)指定元素
2料睛、startBottom:null
不設(shè)置:鼠標(biāo)滾動(dòng),指定元素開(kāi)始滾動(dòng)則開(kāi)始浮動(dòng)摇邦。
設(shè)置:如startTop:"#startTop"恤煞,則到了#startTop底部開(kāi)始浮動(dòng)指定元素。(設(shè)置同一個(gè)元素會(huì)沖突施籍,將以這個(gè)為準(zhǔn))居扒。
3、distanceTop:0
距離頂部的高度丑慎,默認(rèn)為0喜喂。
4瓤摧、endPos:0
距離頂部的高度為多少時(shí)停止浮動(dòng),并固定在相應(yīng)位置玉吁,可以指定jquery對(duì)象照弥,如:endPos:"#footer",也可以是數(shù)字:endPos:300.
5、ottom:-1
默認(rèn)不使用位置為bottom的值进副,當(dāng)設(shè)置為0这揣,將會(huì)停在窗口底端
6、zIndex:0
當(dāng)沒(méi)有設(shè)置這個(gè)值時(shí)影斑,將默認(rèn)使用元素css的z-index值
7给赞、baseClassName:scrollfixed
當(dāng)元素開(kāi)始固定時(shí)給它添加一個(gè)class,你可以設(shè)置為你喜歡的類名鸥昏。
注意:
使用時(shí)塞俱,css添加的屬性為position:static。元素出現(xiàn)在正常文本流中吏垮,跟經(jīng)常用的position:fixed脫離文本流不同障涯。
擴(kuò)展閱讀:
在固定導(dǎo)航方案中,一般都是響應(yīng)鼠標(biāo)滾動(dòng)膳汪,即鼠標(biāo)開(kāi)始滾動(dòng)則固定唯蝶,比如頂部導(dǎo)航∫潘裕或者響應(yīng)元素位置粘我,即元素出現(xiàn)了,則固定痹换,這兩種模式征字。
而固定位置一般分為頂部導(dǎo)航,側(cè)邊欄導(dǎo)航娇豫,兩側(cè)廣告和底部欄導(dǎo)航等匙姜。
固定的插件較多,可參考:
1冯痢、分享9個(gè)滾動(dòng)粘卷jQuery Sticky Scroll插件