Let IE6 support the position: fixed method, CSS expression and JavaScript eval explanation, and expressioneval

Let IE6 support the position: fixed method, CSS expression and JavaScript eval explanation, and expressioneval

Using position: fixed is nothing more convenient when performing the ceiling or fixed effect, but IE6 has no fixed attribute value, we want IE6 to be fixed in a certain position in the browser like fixed. Using onscroll to change the top value is a method, but if the scroll wheel is rolled fast, the card will flash. If advanced browsers are also used like this, it is obviously not elegant, unless the browser version is determined in JS. But here I want to explain how to use CSS to complete the fixed effect.
The following is not an example:

The above is the fixed that I tested IE6 in IETester. Check the scroll bar. Here, the navigation adopts position: fixed.
The core code is as follows:

1. nav {/* nav is the navigation bar */2 position: fixed; 3 _ position: absolute; 4 top: 0; 5 _ top: expression (eval (documentElement. scrollTop); 6 background: # FAA; 7}

When the hack technology is used, the attribute represented by underlines is only recognized by ie6. (Since fixed is not supported only for IE6 and earlier)
The above results can achieve the fixed effect under IE6. To understand _ top: expression (eval (documentElement. scrollTop), it is not easy to understand the meaning and usage of expression and eval.

Expression is a unique attribute of IE and supports IE5 and later versions. It is used to write JavaScript code in CSS. That is to say, expression can contain JavaScript code in parentheses.

Eval indicates the statement or expression that executes the string content and returns the result.

Usage: eval (codes );

Parameters:

• Codes -- a string expression or statement

Return Value:

• If no parameter exists, undefined is returned.
• If a return value exists, this value is returned; otherwise, undefined is returned.
• If it is an expression, return the value of the expression
• If it is the value of the statement returned by the statement
• Returns the value of the last statement for multiple statements or expressions.

After learning about expression and eval, _ top: expression (eval (documentElement. scrollTop. DocumentElement. scrollTop is the position of the scroll bar obtained under IE, and the top value is equivalent to the position of the scroll bar from the top. If the scrollTop value changes, _ top changes accordingly.
Why is eval used? Because documentElement. scrollTop is actually a statement and does not return a value, it is equivalent to executing a = 1 in JS without any operation. To get the documentElement. scrollTop value, we need to return it, instead of using eval.
In this way, all browsers can have the fixed effect, but you will find that IE6 will still flash when you scroll the scroll wheel, this is because when the scroll bar or browser size changes, IE6's amazing rendering engine resets all content and redraws the page, so there will be vibration or blinking problems. The use of backgroune-attachment: fixed; adding to html or body forces the CSS to be loaded before page re-painting, because the pre-painting CSS, that is, your expression has changed before the re-painting, unlike the previous re-painting. In this way, the mouse will not flash when you scroll. This completely achieves the fixed effect. The Code is as follows:
Body {_ background: url (about: blank) fixed}

Summary:
In IE6, fixed cannot be implemented. Therefore, use absolute to simulate fixed. Therefore, JS is required. But only for IE6, JavaScript can be written through expresstion specific to IE in CSS, so as to change the top value in real time to simulate the fixed effect. In IE6, CSS is reloaded when you scroll or adjust the browser size. Therefore, you can use background-attachment: fixed in the body to load CSS before the page is re-rendered.

Code:

1 body {_ background: url (about: blank) fixed} 2 3. nav {4 5 position: fixed; 6 7 _ position: absolute; 8 9 top: 0; 10 11 _ top: expression (eval (documentElement. scrollTop); 12 13 // The top value is the position to be fixed. Similarly, if left is set, the right and bottom must be calculated through scrollLeft and scrollTop, note 14 15 // fixed left: _ left: expression (eval (documentElement. scrollLeft); 16 17 // fixed right: _ left: expression (eval (documentElement. scrollLeft + documentElement. clientWidth-this. offsetWidth); 18 19 // fixed: _ top: expression (eval (documentElement. scrollTop + documentElement. clientHeight-this. offsetHeight); 20 21}

The above is the perfect solution for the fixed solution under IE6. If you have any questions, please leave a message.

CSS: to be compatible with IE6 and earlier versions, position: fixed; what should I use instead?

/* General method except IE6 browser */
. Ie6fixedTL {position: fixed; left: 0; top: 0}. ie6fixedBR {position: fixed; right: 0; bottom: 0}/* unique method of IE6 browser */
* Html. ie6fixedTL {position: absolute; left: expression(eval(document.doc umentElement. scrollLeft); top: expression(eval(document.doc umentElement. scrollTop)} * html. ie6fixedBR {position: absolute; left: expression(eval(document.documentelement.scrollleft?document.doc umentElement. clientWidth-this.offsetWidth)-(parseInt (this. currentStyle. marginLeft, 10) | 0)-(parseInt (this. currentStyle. marginRight, 10) | 0); 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 above code can be used directly. If you want to set the element floating margin, you have to set it twice. For example, if you want to make an element 10 pixels away from the top and 10 pixels away from the left, you need to write it like this:
?

/* General method except IE6 browser */
. Ie6fixedTL {position: fixed; left: 10px; top: 10px}/* unique method of IE6 browser */
* Html. ie6fixedTL {position: absolute; left: expression(eval(document.doc umentElement. scrollLeft + 10); top: expression(eval(document.doc umentElement. scrollTop + 10 ))}


Incompatibility issues in IE6 after a DIV position is fixed with position: fixed

In IE6, you cannot directly use position: fixed ;. We need some CSS Hack to solve it. Of course, the problem with IE6 is not just position: fixed; in the following example, let <div id = "top">... </Div> the element is fixed at the bottom of the browser and 20 pixels to the right: # top {position: fixed; _ position: absolute; bottom: 0; right: 5%; _ 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. The top and bottom attributes must be implemented using the above expressions. 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: to fix the elements at 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 code can only be implemented at the bottom and top. You can use _ margin-top: 10px, or _ margin-bottom: 10px to modify the position of the numerical control element. Position: fixed; currently, the problem has not been completely resolved. 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 {background-image: url (about: blank); background-attachment: fixed;} to the CSS file ;} * is identified for IE6. By now, the position: fixed; problem of IE6 has been solved.