最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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
相关文章
- 基于jQuery实现一个marquee无缝滚动的插件 06-13
- 新闻上下滚动jquery,超简洁 02-27
- jQuery滚动条样式插件mCustomScrollbar用法介绍 07-26
- jquery中animate列表滚动效果代码 08-10
- jQuery Scroll插件响应式单页全屏滚动介绍 01-30
- jQuery ScrollBar Plugin滚动条插件例子 04-12