一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery 滚动条固定在某个位置详解

时间:2013-11-18 编辑:简简单单 来源:一聚教程网

插件需求描述

该jQuery插件主要解决随着滚动条滚动固定某个div,鼠标滚动时浮动固定在顶部。当我们滚动网页浏览时,我们想将侧栏的某个广告或者精选文章固定在那里,这样用户滚动下来时侧栏就不是空白的,增加曝光率和点击率,增加收入和流量。
当然有时候设计网页时,侧栏也会用到一边是固定浮动在那里,一边是滚动的。这种情况我们也同样是可以用这个插件。

插件概述

作者:caibaojian

插件使用协议:GNU GENERAL PUBLIC LICENSE,个人和商业均可免费使用。

该插件大小为2K(压缩后),插件已经发布到github上了,你可以到项目主页下载源代码和演示代码,里面共有一个js文件和六种演示的代码。

github项目主页地址

如果你想直接下载js,可以使用这个scrollfix.js(未压缩2.77k),scrollfix-min.js(压缩后2k)。

打包下载scrollfix.zip(包含js和6个演示代码)http://file.111com.net/upload/2013/11/scrollfix.zip

在线演示

 代码如下 复制代码

var fix = $(".fix"), fixtop = $(".fix-top"), fixStartTop = $(".fix-startTop"), fixStartBottom = $(".fix-startBottom"), fixbottom = $(".fix-bottom"), fixfooter = $(".fix-footer");

第一种:默认滚动到这里开始固定:fix.scrollFix();

第二种:滚动到距离这里顶部20像素开始固定:fixtop.scrollFix({distanceTop:20});

第三种:滚动到一个标签#startTop的头部开始固定:fixStartTop.scrollFix({startTop:"#startTop"});

第四种:滚动到一个标签#startBottom的末端开始固定:fixStartBottom.scrollFix({startBottom:"#startBottom"});

第五种:滚动停在底部300像素:fixbottom.scrollFix({endPos:300});

第六种:滚动停在底部#fixFooter的位置:fixfooter.scrollFix({endPos:"#fixFooter"});

参数详解

参数名字 参数值 参数作用
startTop null 开始固定的jquery对象的顶部
startBottom null 开始固定的jquery对象末端,两个参数都设置的话,默认后面参数生效
distanceTop 0/null 数值,距离顶部的高度,可以为高度或者jquery对象
endPos null/0 距离底部的高度,可以为高度或者jquery对象

如果你对这个插件有改进和意见,欢迎反馈给我,或者也可以在github在pull消息给我。非常感谢你的使用,scrollfix正在成长中。你的一点评论和转发都是对我们的支持。

仿百度帖吧头部固定不随滚动条滚动效果

 代码如下 复制代码





导航固定




  





最后大家来下载源码吧:http://file.111com.net/upload/2013/11/scrollfix.zip

热门栏目