How to achieve the position:fixed effect under IE6:
Recommendation: As far as possible handwriting code, can effectively improve the learning efficiency and depth.
Because IE6 does not support position:fixed, so many good results can not be achieved, but in the IE6 is not not able to achieve this effect, the following is an example of how to achieve this effect. The code example is as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Realizing position:fixed-Ant tribe under IE6</title><styletype= "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><Divclass= "First"> <Divclass= "fixed"></Div></Div></Body></HTML>
The code above can be compatible with IE6 and other mainstream browsers, and the core code for this effect is:
_top:expression (eval (document.documentElement.scrollTop));
Note: After adding this line of code, the IE6 top function fails, so add a _margin-top.
Although the above code implements the desired function, there is still a problem, that is, when you drag the scroll bar, there will be a shiver phenomenon. The code is modified as follows:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Realizing position:fixed-Ant tribe under IE6</title><styletype= "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><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$(function() {$ (window). Scroll (function(){ $("#thediv"). Text ($ (window). scrolltop ()); })}); </Script></Head><Body><DivID= "Thediv"></Div></Body></HTML>
The above code perfectly implements the function we want, and adds the following code to the first instance:
*html { background-image:url (about:blank); background-attachment:fixed;}The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0405/144.html
How to achieve the position:fixed effect under IE6
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
