基于jquery的滚动条滚动固定div(附Demo)
2012-10-29 13:12
357 查看
今天与大家分享一下我写的一个滚动条滚动固定div的例子,现在很多地方都可以看到这样的效果,例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果,现在流行这个么?元芳,你怎么看?我也在网上找了找代码,屡试不爽啊,很多代码乱且没用。于是乎,我自己写一个,代码非常之简单,只有10几行,但遗憾的是,不兼容IE6,如果谁有兼容IE6的例子,还请指教。
直接贴下代码吧。
友情提醒:我只提供了一个简单的Demo,在实际开发中Demo中的东西还是需要修改修改的。
附:Demo下载
PS:Tandy Tang祝大家写代码写的愉快!
直接贴下代码吧。
<!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"> 1 </div> <div class="demo"> 2 </div> <div class="demo"> 3 </div> <div class="demo"> 4 </div> <div class="demo2" id="demo"> 我现在是红色,把滚动条往下啦我会显示成蓝色。我还没固定了。 </div> <div class="demo"> 6 </div> <div class="demo"> 7 </div> <div class="demo"> 8 </div> <div class="demo"> 9 </div> <div class="demo"> 10 </div> </body> </html>
友情提醒:我只提供了一个简单的Demo,在实际开发中Demo中的东西还是需要修改修改的。
附:Demo下载
PS:Tandy Tang祝大家写代码写的愉快!
相关文章推荐
- 基于jquery的滚动条滚动固定div
- 基于jquery的DIV随滚动条滚动而滚动的代码
- 基于jquery的DIV随滚动条滚动而滚动的代码
- 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 (转)
- Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》
- 固定DIV不随滚动条滚动
- 基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
- 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动 (转)
- Jquery DIV滚动至浏览器顶部后固定不动代码
- 基于jquery的滚动菜单(滚动条)的实现.
- jquery实现div跟着滚动条滚动滚,不要根据浏览器窗口定位,根据body定位
- HTML 中让DIV不随滚动条滚动,使终显示在浏览器的固定位置
- jquery 判断div滚动条是否滚动到底部
- Jquery DIV滚动至浏览器顶部位置固定
- 当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动
- jquery 让div滚动条自动滚动到最下面
- Jquery DIV滚动至浏览器顶部位置固定
- div 固定不动,不随滚动条滚动且不闪动
- 如何让DIV固定在页面的某个位置而不随着滚动条随意滚动