基于jquery的滚动条滚动固定div(附演示下载)


Posted in Javascript onOctober 29, 2012

例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果,现在流行这个么?元芳,你怎么看?我也在网上找了找代码,屡试不爽啊,很多代码乱且没用。于是乎,我自己写一个,代码非常之简单,只有10几行,但遗憾的是,不兼容IE6,如果谁有兼容IE6的例子,还请指教。

直接贴下代码吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>demo</title> 
<script src="jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var loaded = true; 
var top = $("#demo").offset().top; 
function Add_Data() 
{ 
var scrolla=$(window).scrollTop(); 
var cha=parseInt(top)-parseInt( scrolla); 
if(loaded && cha<=0) 
{ 
$("#demo").removeClass("demo2").addClass("demo1"); 
$("#demo").html("我现在是蓝色,把滚动条往上拉我会显示成红色。我已经固定了。"); 
loaded=false; 
} 
if(!loaded && cha>0) 
{ 
$("#demo").removeClass("demo1").addClass("demo2"); 
$("#demo").html("我现在是红色,把滚动条往下拉我会显示成蓝色。我还没固定了。"); 
loaded=true; 
} 
} 
$(window).scroll(Add_Data); 
}); 
</script> 
<style type="text/css"> 
.demo 
{ 
border: 1px solid #dcdcdc; 
width: 300px; 
margin-top: 10px; 
overflow: auto; 
text-align: left; 
background-color: #ffffff; 
height:200px; 
} 
.demo1 
{ 
position: fixed; 
_position: absolute; 
top: 0px; 
background-color: #0000ff; 
height:200px; 
width:300px; 
color:#ffffff; 
} 
.demo2 
{ 
border: 1px solid #dcdcdc; 
width: 300px; 
margin-top: 10px; 
overflow: auto; 
text-align: left; 
background-color: #ff0000; 
height:200px; 
color:#ffffff; 
} 
</style> 
</head> 
<body> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo2" id="demo"> 
我现在是红色,把滚动条往下啦我会显示成蓝色。我还没固定了。 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
</body> 
</html>

友情提醒:我只提供了一个简单的Demo,在实际开发中Demo中的东西还是需要修改修改的。
在线演示:http://demo.3water.com/js/2012/scrollfixed/
附:Demo下载
Javascript 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 #Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 #Javascript
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 #Javascript
改进版通过Json对象实现深复制的方法
Oct 24 #Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 #Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 #Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 #Javascript
You might like
php中rename函数用法分析
2014/11/15 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
短信提示使用 特效
2007/01/19 Javascript
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
对党的十八届四中全会的期盼
2014/10/17 职场文书
社区母亲节活动总结
2015/02/10 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
限期整改通知书
2015/04/22 职场文书
成绩单家长意见
2015/06/03 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android