我正尝试着向页面中加 javascript。但是在用 ie6 测试时,出现问题:固定定位元素在滚动时有抖动现象。在网上查到的方法是给html加样式background,但是无效啊。该怎么解决呢?求高手解答,谢谢!
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>教师研修工作室</title> 6 <script type="text/javascript"> 7 window.onscroll=window.onresize=function(){ 8 var scrollTop=document.documentElement.scrollTop || document.body.scrollTop; 9 var oDivTop=document.getElementById('topMenu'); 10 11 if(window.XMLHttpRequest){ 12 return; 13 } 14 else { 15 oDivTop.style.top=scrollTop+'px'; 16 } 17 }; 18 </script> 19 <style type="text/css"> 20 html { 21 font-family: "微软雅黑", tahoma, arial, \5b8b\4f53, sans-serif; 22 _background: url(about:blank) fixed; 23 /*_text-overflow: ellipsis;*/ 24 } 25 body { 26 color: #444; 27 background-color: #F9F9F9; 28 line-height: 1.5; 29 } 30 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 31 margin:0;padding:0; 32 } 33 .topmenu { 34 background-color: white; 35 height: 42px; 36 border-top-width: 3px; 37 border-bottom-width: 1px; 38 border-top-style: solid; 39 border-bottom-style: solid; 40 border-top-color: #2CC0FF; 41 border-bottom-color: #E1E1E1; 42 position: fixed; 43 left: 0px; 44 top: 0px; 45 width: 100%; 46 z-index: 5000; 47 _position: absolute; 48 } 49 </style> 50 </head> 51 <body style="height:3000px;"> 52 <div class="topmenu" id="topMenu"></div> 53 </body> 54 </html>
1 * html{ 2 background-image:url(about:blank); 3 background-attachment:fixed; 4 } 5 #topmenu{ 6 position:fixed; 7 left:0; 8 top:0; 9 _position:absolute; 10 _top:expression(eval(document.documentElement.scrollTop)); 11 12 }
用 expression 表达式会不会占用太多资源啊?
@zanetti: expression会有性能问题。它会频繁的求值。你滚动页面,调整页面大小,它就会触发求值,严重影响了浏览器性能。
@zanetti: 你可以看看这篇文章http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
@白衣书生: 这篇文章我看了,能解决 ie6 固定定位且不抖动。但是对于我的页面中,顶部菜单会把滚动条遮住。所以我用定时器实时监控页面是否出现滚动条,从而给顶部菜单设置不同的样式,才能不遮挡滚动条。这样处理行吗?
@白衣书生: 可以用条件注释的方式。
@zanetti: “顶部菜单会把滚动条遮住”,这是什么情况?
@白衣书生: 因为顶部菜单的宽度是100%,那篇文章设置的滚动条是 html, body 的,就会遮住。
放弃ie6吧,不放弃会阻碍web的发展