鼠标滚动固定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