标签：
如何在IE6下实现position:fixed效果:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
由于IE6并不支持position:fixed，所以导致很多好的效果都无法实现，但是在IE6下并不是不能够实现此中效果，下面就通过一段实例介绍一下如何实现此种效果。代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</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"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</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="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
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4625181.html
