Let IE6 support position:fixed method, CSS expression and JavaScript eval explained

To do the ceiling effect or fixed effect, the use of position:fixed is nothing but the most convenient, but the evil IE6 is not fixed this attribute value, and we want to make IE6 as fixed in the browser in a certain location, Using Onscroll to change the top value is a method, but if the rollers roll faster, a card flicker occurs. And if the high-level browser is also used this way, it is obviously a loss, unless JS to determine the browser version. But here I would like to explain the use of CSS to complete the fixed effect.
Countless words are less than one instance:

The above is the author under the IETester Test IE6 fixed, pay attention to the scroll bar. One of the navigation uses is position:fixed.
The core code is as follows:

 1  .nav  { /*   nav for navigation bar  */ 2   position : fixed ; 3   _position :  absolute ; 4   top : 0 ; 5   _top : ; 6   background :  #FAA ; 7 } 

Using the hack technique, the underscore represents a property that is recognized only IE6 below. (Because only IE6 below does not support fixed, so special handling)
The above effect can realize the fixed effect under IE6. To understand _top:expression (documentelement.scrolltop), it is not easy to understand the meaning and usage of expression and eval, as well as the following explanation.

Expression is an IE-specific attribute that supports IE5 and above, and is used to write JavaScript code in CSS, meaning that the parentheses in expression can be a piece of JavaScript code.

Eval represents a statement or expression that executes the contents of a string and returns its result.

Usage: eval (codes);

Parameters:

• Codes--An expression or statement in the form of a string

return value:

• If there are no parameters, return to undefined
• Returns this value if there is a return value, otherwise undefined
• Returns the value of an expression if it is an expression
• If the value of a statement is returned for a statement
• If the value of the last statement is returned for more than one statement or expression

_top:expression (Documentelement.scrolltop) After understanding expression and eval, it is not difficult to understand. Documentelement.scrolltop gets the position of the scroll bar for IE, and the top value is the position of the scroll bar at the top. If the scrolltop value changes, the _top will change accordingly.
And why use eval? Because Documentelement.scrolltop is actually a statement and there is no return value, it is equivalent to not doing anything after a=1 executed in JS. And we need to get the Documentelement.scrolltop value back, and we just need to use eval.
In this way, all browsers can have fixed effect, but you will find that IE6 scroll the mouse wheel will still appear flicker phenomenon, because when the scroll bar scrolling or browser size changes, IE6 the rendering engine will reset all content and redraw the page, there will be vibration or flicker problem. Instead of using backgroune-attachment:fixed, adding to HTML or body forces the page to load the CSS before redrawing, because the pre-redraw CSS, which is the re-drawing of your expression, has changed, unlike the previous redraw. So when you scroll the mouse will not appear flashing phenomenon. In this way, the fixed effect is fully achieved. The code is as follows:
Body {_background:url (about:blank) fixed}

Summarize:
IE6 cannot be fixed, so use absolute to simulate a fixed, so you need to use JS. And only for IE6 processing, can be in CSS through the specific expresstion of IE write JavaScript, so that real-time changes in the top value to achieve the simulated fixed effect. The CSS is overloaded with IE6 scrolling or resizing the browser, so the CSS is loaded before the page is re-rendered using background-attachment:fixed in the body.

Code:

1 Body{_background:URL (about:blank) fixed}2 3 . Nav{4 5 position:fixed;6 7 _position:Absolute;8 9 Top:0;Ten  One _top:expression (eval (documentelement.scrolltop)); A  - The //top value is the position where you want to fix the position, set left similarly, set right and bottom need to be calculated by ScrollLeft and scrolltop, as follows -  the //Fixed left: _left:expression (eval (documentelement.scrollleft)); -  - //Fixed right: _left:expression (eval (Documentelement.scrollleft + documentelement.clientwidth-this.offsetwidth)); -  + //fixed under: _top:expression (eval (Documentelement.scrolltop + documentelement.clientheight-this.offsetheight)); -  +}

The above is the perfect solution to solve the fixed method under IE6. Please leave a message if you have any questions or questions.