Implement position: fixed in IE6

How to Implement position: fixed; in IE6
As mentioned earlier, position: fixed; cannot be used directly in IE6 ;. You need some CSS Hack to solve it. Of course, IE6 is not just about position: fixed;

Let <div id = "top">... </div> fix the element at the bottom of the browser and 20 pixels to the right. This Code is as follows:

# Top {
Position: fixed;
_ Position: absolute;
Bottom: 0;
Right: 20px;
_ Bottom: auto;
_ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));
}

The right and left attributes can be solved by absolute positioning, while top and bottom must be implemented by using the above expression. The _ symbol in _ position: absolute; can only be identified by IE6 to distinguish other browsers.

The above is just an example. The following is the most important code snippet:

Pin the element to the top of the browser: # top {
_ Position: absolute;
_ Bottom: auto;
_ Top: expression(eval(document.doc umentElement. scrollTop ));
} Fix the element at the bottom of the browser: # top {
_ Position: absolute;
_ Bottom: auto;
_ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop, 10) | 0)-(parseInt (this. currentStyle. marginBottom, 10) | 0 )));
} The two pieces of code can only be implemented at the bottom and top. You can use _ margin-top: 10px; or _ margin-bottom: 10px; modify the position of the numeric control element.

Position: fixed; flashing
The problem has not been completely solved yet. After using the above method, you will find that the fixed positioning elements will flash when rolling the scroll bar. To solve the flash problem, add * html {to the CSS file {
Background-image: url (about: blank );
Background-attachment: fixed;
} * Is identified for IE6.

By now, the position: fixed; problem of IE6 has been solved. We have also collected a JS solution for you.

JS Solution
JS is the most undesirable solution for me, because JS is a little useless for this pure style bug, and JS needs to be executed after DOM loading, the screen may flash.

The JS solution is very simple. It is implemented by setting a top. top refers to the length of the top part of the page from the top part of the document. It can be divided into the following items (not the complete code)

Top = scrollTop + clientHeight-height (the height of the page)

ScrollTop and clientHeight are used to solve the above two problems respectively. The scroll bar will affect scrollTop, and the window change will affect clientHeight. Therefore, when the two events are triggered, you must reset the top, as a result, the following code is formed, but the update rate of this script will be very high, and it is estimated that there will be performance problems.

Window. onresize = window. onscroll = function (){
// Reset top
};