做吸顶效果或是固定效果时，使用position:fixed无非是最方便的，可是万恶的ie6是没有fixed这个属性值的，而我们要使ie6能够像fixed一样固定在浏览器中的某个位置，使用onscroll改变top值是一个方法，但如果滚轮滚的快，会出现卡闪烁情况。而如高级浏览器如果也这样用，那显然有失大雅，除非js中判断浏览器版本。但是在这里笔者要讲解的是使用css完成fixed效果。
千言万语不及实例一个：
以上是笔者在IETester下测试IE6的fixed，注意看滚动条。其中导航采用的是position:fixed。
核心代码如下：
1 .nav { /* nav为导航栏 */2 position:fixed;3 _position: absolute;4 top:0;5 _top:expression(eval(documentElement.scrollTop));6 background: #FAA;7 }登录后复制
使用到了hack技术，下划线所代表的属性只有IE6以下识别。（因为只有IE6以下不支持fixed，所以特殊处理）
以上效果即可实现IE6下的fixed效果。而要理解_top:expression(eval(documentElement.scrollTop));不太容易，需要理解expression及eval的含义及用法，也是下面要讲解的内容。
expression为IE特有的属性，支持IE5及以上版本，用来在CSS中书写JavaScript代码，也就是说expression的括号内可以是一段JavaScript代码。
eval表示执行字符串内容的语句或表达式，并返回其结果。
立即学习“Java免费学习笔记（深入）”；
用法：eval(codes);
参数：
codes — 字符串形式的表达式或语句
返回值：
如果没有参数，返回undefined 如果有返回值将返回此值，否则返回undefined 如果为表达式，返回表达式的值 如果为语句返回语句的值 如果为多条语句或表达式返回最后一条语句的值
了解expression及eval后，_top:expression(eval(documentElement.scrollTop));就不难理解了。documentElement.scrollTop为IE下获取滚动条的位置，而top值就相当于滚动条距离顶部的位置。如果scrollTop值改变，_top也就相应改变。
而为什么要使用eval呢？因为documentElement.scrollTop实际就是一条语句，并没有返回值，相当于在JS中执行了a=1后没执行任何操作。而我们要拿到documentElement.scrollTop值就需要将其返回，而只需要使用eval即可。
这样一来，所有浏览器器都可以有fixed的效果了，但是你会发现IE6下滚动鼠标滚轮时仍然会出现闪烁现象，这是因为当滚动条滚动或浏览器大小改变时，IE6奇葩的渲染引擎会重置所有内容并重画页面，因此会出现振动或闪烁的问题。而使用backgroune-attachment:fixed;添加至html或body会强制页面重画前先加载CSS，因为重画前处理的CSS，也就是重画前你的表达式就已经改变了，不像之前的重画之后才改变。这样当你鼠标滚动的时候就不会出现闪烁的现象了。这样就完全达成了fixed的效果。代码如下：
body { _background: url(about: blank) fixed}
总结：
IE6下不能实现fixed，因此使用absolute模拟fixed，因此需要使用JS。而只针对IE6进行处理，可在CSS中通过IE特有的expresstion写JavaScript，从而实时改变top值达到模拟fixed的效果。而IE6滚动或调整浏览器大小则重载CSS，因此使用在body中使用background-attachment:fixed使页面重新渲染前加载CSS。
代码：
1 body {_background: url(about:blank) fixed} 2 3 .nav { 4 5 position: fixed; 6 7 _position: absolute; 8 9 top: 0;10 11 _top: expression(eval(documentElement.scrollTop)); 12 13 // top值为想要固定定位的位置，设置left同理，设置right与bottom需要通过scrollLeft及scrollTop进行计算，如下注释14 15 // 固定左：_left:expression(eval(documentElement.scrollLeft));16 17 // 固定右：_left:expression(eval(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth));18 19 // 固定下：_top:expression(eval(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight));20 21 }登录后复制
以上就是IE6下解决fixed方法的完美方案。如有问题或疑问请留言。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3092215.html
