基于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 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
vue中如何让子组件修改父组件数据
Jun 14 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 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 匿名函数与注意事项详细介绍
2016/11/26 PHP
php微信公众号开发模式详解
2016/11/28 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
vue实现购物车的监听
2020/04/20 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
详解Appium+Python之生成html测试报告
2019/01/04 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
基于python使用tibco ems代码实例
2019/12/20 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
中秋寄语大全
2014/04/11 职场文书
政府法律服务方案
2014/06/14 职场文书
人口与计划生育责任书
2015/05/09 职场文书
处罚决定书范文
2015/06/24 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript