滑鼠滾動固定js（jquery）例項分享

當然，大家都挺忙，直接說目前我在用的方案、呼叫方式以及原始碼，然後再擴充套件的說！

方案：scrollfix.js

推薦理由：可指定元素，可指定高度，可指定位置，可指定跟蹤元素，還想怎樣？頂多也就差個animate.css使它更酷炫了。

應用例項：找前輩網前輩詳情頁-左右導航

呼叫方式：$("#fix").scrollFix({

startTop:"#startTop",

distanceTop:20,

endPos:"#footer"

});

原始碼下載：

scrollfix-master

參考演示：

http://www.jq22.com/yanshi9192

引數說明：

引數名字引數值引數作用

startTopnull開始固定的jquery物件的頂部

startBottomnull開始固定的jquery物件末端，兩個引數都設定的話，預設後面引數生效

distanceTop0/null數值，距離頂部的高度，可以為高度或者jquery物件

endPosnull/0距離底部的高度，可以為高度或者jquery物件

bottom-1預設不使用位置為bottom的值，當設定為0，將會停在視窗底端

zIndex0當沒有設定這個值時，將預設使用元素的css z-index值

baseClassName'scrollfixed'當元素開始固定時給它新增一個class，你可以設定為你喜歡的類名。

1、startTop:null

不設定：滑鼠滾動，指定元素開始滾動則開始浮動。

設定：如startTop:"#startTop"，則到了#startTop頂部開始浮動指定元素

2、startBottom:null

不設定：滑鼠滾動，指定元素開始滾動則開始浮動。

設定：如startTop:"#startTop"，則到了#startTop底部開始浮動指定元素。（設定同一個元素會衝突，將以這個為準）。

3、distanceTop:0

距離頂部的高度，預設為0。

4、endPos:0

距離頂部的高度為多少時停止浮動，並固定在相應位置，可以指定jquery物件，如:endPos:"#footer",也可以是數字：endPos:300.

5、ottom:-1

預設不使用位置為bottom的值，當設定為0，將會停在視窗底端

6、zIndex:0

當沒有設定這個值時，將預設使用元素css的z-index值

7、baseClassName：scrollfixed

當元素開始固定時給它新增一個class，你可以設定為你喜歡的類名。

注意：

使用時，css新增的屬性為position:static。元素出現在正常文字流中，跟經常用的position:fixed脫離文字流不同。

擴充套件閱讀：

在固定導航方案中，一般都是響應滑鼠滾動，即滑鼠開始滾動則固定，比如頂部導航。或者響應元素位置，即元素出現了，則固定，這兩種模式。

而固定位置一般分為頂部導航，側邊欄導航，兩側廣告和底部欄導航等。

固定的外掛較多，可參考：

1、分享9個滾動粘卷jQuery Sticky Scroll外掛

2、jQuery滑動固定外掛scrollfix

3、http://amazeui.org/javascript/sticky