基于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获取iframe的document对象的方法
Oct 10 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
js只执行1次的函数示例
Jul 20 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
elementUI table表格动态合并的示例代码
May 15 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中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python简单读取大文件的方法
2016/07/01 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
python爬取代理ip的示例
2020/12/18 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
质量工程师岗位职责
2013/11/16 职场文书
初中学生期末评语
2014/04/24 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android