当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动
2014-02-19 14:32
459 查看
JS:
当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动
html代码 用到了css的z-index:这个属性,此处将固定的部分显示层在最上层,非固定部分当滚动时显示在固定部分的底层
当div滚动到顶部时,DIV固定在顶部不动,不随滚动条滚动而滚动,除这个div以外的其它元素可以滚动
function scrollDiv () { var ie6 = document.all; var dv = $('#fixedMenu_keleyi_com'), st; dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离 $(window).scroll(function () { st = Math.max(document.body.scrollTop || document.documentElement.scrollTop); if (st > parseInt(dv.attr('otop'))) { if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果 dv.css({ position: 'absolute', top: st }); } else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 }); } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' }); }); }
html代码 用到了css的z-index:这个属性,此处将固定的部分显示层在最上层,非固定部分当滚动时显示在固定部分的底层
z-index:的值越大为固定在顶层
<div style='width:100%; text-align: center;background:#ffffff;z-index:99999;padding:30px 0px 0px 0px;' id="fixedMenu_keleyi_com"> <div style='width:100%; margin-top:0px; margin-bottom:10px; text-align: center;background:#ffffff;z-index:99;' > 此外为你要固定的内容 </div> </div> <div class="coe_team_gover coe_main_content" style='width: 100%;z-index:-99999;'>此处为非固定内容</div>
相关文章推荐
- Web布局连载——两栏固定布局(五)
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- jQuery Ajax 跨域调用
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- [div+css]晒晒最新制作专题推广页模板
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程(二)
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页