插件需求描述
该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.111cn.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正在成长中。你的一点评论和转发都是对我们的支持。
仿百度帖吧头部固定不随滚动条滚动效果
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航固定</title> <script src="/ajaxjs/jquery1.3.2.js"language="javascript" type="text/javascript"></script> <script> $(function(){ $(window).scroll(function() { //$("body").css({"background-position":"center "+$(window).scrollTop()+""}); if($(window).scrollTop()>=250){ $(".nav").addClass("fixedNav"); }else{ $(".nav").removeClass("fixedNav"); } }); }); </script> <style> *{ margin:0px; padding:0px; } div.nav{ background:#000000; height:57px; line-height:57px; color:#ffffff; text-align:center; font-family:"微软雅黑", "黑体"; font-size:30px; } div.fixedNav{ |
|
最后大家来下载源码吧:http://file.111cn.net/upload/2013/11/scrollfix.zip