codecamp

jQuery滑动固定插件scrollfix


查看演示   website
下载地址:https://github.com/kujian/scrollfix
ie兼容6
插件描述:jQuery滑动固定插件scrollfix滚动到某个位置固定起来

jquery插件scrollfix:滑动到某个位置浮动起来

该jQuery插件主要解决滚动过程中固定某个元素,并支持到达某个位置后停止在那里随页面向上滚动,当滚回来时,重新固定起来。兼容IE6。

使用场景

当我们滚动网页浏览时,我们想将侧栏的某个广告或者精选文章固定在那里,这样用户滚动下来时侧栏就不是空白的,增加曝光率和点击率,增加收入和流量。

当然有时候设计网页时,侧栏也会用到一边是固定浮动在那里,一边是滚动的。这种情况我们也同样是可以用这个插件。

参数详解

参数名字参数值参数作用
startTopnull开始固定的jquery对象的顶部
startBottomnull开始固定的jquery对象末端,两个参数都设置的话,默认后面参数生效
distanceTop0/null数值,距离顶部的高度,可以为高度或者jquery对象
endPosnull/0距离底部的高度,可以为高度或者jquery对象
bottom-1默认不使用位置为bottom的值,当设置为0,将会停在窗口底端
zIndex0当没有设置这个值时,将默认使用元素的css z-index值
baseClassName'scrollfixed'当元素开始固定时给它添加一个class,你可以设置为你喜欢的类名。


插件参数有4个,下面我将说明一下如何使用这个浮动固定插件

第一个:startTop:null

这个是定义什么时候指定的元素开始浮动,如果没有设置,则默认滚动指定元素位置开始浮动。如有指定,可以为startTop:"#startTop",当元素到达这个标签的顶部时,则浮动出来。

第二个:startBottom:null

这个同样是定义元素什么时候开始浮动,跟上面不能冲突,只能指定一个。两个如果都指定,则默认后面这个参数为准。这个是当元素滚动到startBottom:"#startBottom"的末端时开始浮动。

第三个:distanceTop:0

距离顶部的高度,默认为0。

第四个:endPos:0

距离顶部的高度为多少时停止浮动,并固定在相应位置,可以指定jquery对象,如:endPos:"#footer",也可以是数字:endPos:300.

第五个:bottom:-1

默认不使用位置为bottom的值,当设置为0,将会停在窗口底端

第六个:zIndex:0

当没有设置这个值时,将默认使用元素的css z-index值

第七个:baseClassName:scrollfixed

当元素开始固定时给它添加一个class,你可以设置为你喜欢的类名。

使用方法

$("#fix").scrollFix({startTop:"#startTop",distanceTop:20,endPos:"#footer"});

具体你可以下载我里面提供的六个静态文件,给出了六种可能性。希望你会喜欢上这个插件。enjoy it!



兼容IE的滚动条
jQuery滚动监听插件Waypoints
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }