星空网 > 软件开发 > 网页设计

如何在IE6下实现position:fixed效果

如何在IE6下实现position:fixed效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
由于IE6并不支持position:fixed,所以导致很多好的效果都无法实现,但是在IE6下并不是不能够实现此中效果,下面就通过一段实例介绍一下如何实现此种效果。代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">body{ margin:40px; padding:0px; border:1px solid blue;}.first{ width:300px; height:600px; border:1px solid red; margin:20px;}.first .fixed{ width:100px; height:100px; background-color:black; position:fixed; _margin-top:20px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); left:20px; top:20px;}</style></head><body><div class="first"> <div class="fixed"></div></div></body></html>

以上代码可以兼容IE6和其他主流浏览器,实现此效果的核心代码是:

_top:expression(eval(document.documentElement.scrollTop));

注意:加上了上面这一行代码之后,IE6下top功能失效了,所以要加一个_margin-top。
虽然上面的代码实现了想要的功能,但是还是有点问题,那就是当拖动滚动条的时候会出现颤抖现象。代码修改如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>IE6下实现position:fixed-蚂蚁部落</title><style type="text/css">*{ margin:0px; padding:0px;}body{height:1000px;}#thediv{ width:100px; height:100px; background-color:#CCC; position:fixed; _margin-top:20px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop)); left:20px; top:20px; text-align:center; line-height:100px;}</style><script type="text/javascript" src='/images/loading.gif' data-original="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){  $(window).scroll(function(){   $("#thediv").text($(window).scrollTop()); })}); </script></head><body><div id="thediv"></div></body></html>

以上代码完美实现了我们想要的功能,在第一段实例基础上添加如下代码:

*html{ background-image:url(about:blank); background-attachment:fixed;}

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0405/144.html




原标题:如何在IE6下实现position:fixed效果

关键词:ie

ie
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

tradeindia:https://www.ikjzd.com/w/2305
豆沙包:https://www.ikjzd.com/w/2306
环新网络:https://www.ikjzd.com/w/2307
ishare:https://www.ikjzd.com/w/2308
shop stats:https://www.ikjzd.com/w/2309
亚马逊直评:https://www.ikjzd.com/w/231
海陵岛马尾岛景点介绍 海陵马尾岛图片:https://www.vstour.cn/a/363177.html
无锡旅游景点竹海 - 无锡的竹海:https://www.vstour.cn/a/363178.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流