Home > Article > Web Front-end > How to achieve position:fixed effect under IE6_html/css_WEB-ITnose
How to achieve position:fixed effect under IE6_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:421095browse
How to achieve position:fixed effect under IE6:
Suggestion: Handwrite the code as much as possible, which can effectively improve the efficiency and depth of learning.
Since IE6 does not support position:fixed, many good effects cannot be achieved. However, it is not impossible to achieve this effect under IE6. Here is an example to introduce how to achieve this effect. Code examples are as follows:
<!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> The above code is compatible with IE6 and other mainstream browsers. The core code to achieve this effect is:
_top:expression(eval(document.documentElement.scrollTop));
Note: After adding the above line of code, the top function is disabled under IE6, so a _margin-top must be added.
Although the above code achieves the desired function, there is still a problem, that is, shaking occurs when the scroll bar is dragged. The code is modified as follows:
<!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="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> The above code perfectly realizes the function we want. Based on the first example, add the following code:
*html{ background-image:url(about:blank); background-attachment:fixed;} The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0405/144.html