基于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 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 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 多行多列显示
2009/08/15 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
js 操作css实现代码
2009/06/11 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
PyQt5实现拖放功能
2018/04/25 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python圣诞树编写实例详解
2020/02/13 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
顶岗实习接收函
2014/01/09 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
公务员培的训心得体会
2014/09/01 职场文书
内乡县衙导游词
2015/02/05 职场文书
降价通知函
2015/04/23 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python