Let IE6 support the position:fixed method, CSS expression and JavaScript eval explained_html/css_WEB-ITnose

When making ceiling effects or fixed effects, it is most convenient to use position:fixed, but the evil IE6 does not have the attribute value fixed, and we want to make IE6 behave like fixed Fixing it at a certain position in the browser and using onscroll to change the top value is one method, but if the wheel scrolls too fast, flickering will occur. If an advanced browser also uses it this way, it would obviously be inelegant, unless the browser version is determined in JS. But what I want to explain here is the use of CSS to achieve the fixed effect.
Thousands of words are not as good as one example:

The above is the author’s fix for testing IE6 under IETester. Pay attention to the scroll bar. The navigation uses position:fixed.
The core code is as follows:

1 .nav {    /* nav为导航栏 */2     position:fixed;3     _position: absolute;4     top:0;5     _top:expression(eval(documentElement.scrollTop));6     background: #FAA;7 }

Using hack technology, the attributes represented by the underline are only recognized by IE6 and below. (Because only IE6 and below do not support fixed, so special processing)
The above effect can achieve the fixed effect under IE6. It is not easy to understand _top:expression(eval(documentElement.scrollTop)); you need to understand the meaning and usage of expression and eval, which is what will be explained below.

Expression is a unique attribute of IE. It supports IE5 and above and is used to write JavaScript code in CSS. That is to say, the brackets of expression can be a piece of JavaScript code.

eval means executing a statement or expression of the string content and returning its result.

Usage: eval(codes);

Parameters:

codes -- expression or statement in string form

Return value:

If there are no parameters, return undefined

If there is a return value, this value will be returned, otherwise undefined

If it is an expression, return the value of the expression

If the value of the statement is returned for a statement

If the value of the last statement is returned for multiple statements or expressions

After understanding expression and eval, _top:expression(eval( documentElement.scrollTop)); is not difficult to understand. documentElement.scrollTop obtains the position of the scroll bar 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.
And why use eval? Because documentElement.scrollTop is actually a statement and has no return value, which is equivalent to executing a=1 in JS without performing any operations. If we want to get the documentElement.scrollTop value, we need to return it, and we only need to use eval.
In this way, all browsers can have a fixed effect, but you will find that flickering will still occur when scrolling the mouse wheel under IE6. This is because when the scroll bar scrolls or the browser size changes, IE6 The weird rendering engine resets everything and redraws the page, so you get vibration or flickering issues. Using backgroune-attachment:fixed; added to html or body will force the CSS to be loaded before the page is redrawn, because the CSS processed before redrawing, that is, your expression has been changed before redrawing, unlike the previous redrawing. Change only after painting. This way there will be no flickering when your mouse scrolls. This completely achieves the fixed effect. The code is as follows:
body { _background: url(about: blank) fixed}

Summary:
fixed cannot be implemented under IE6, so absolute is used to simulate fixed, so JS needs to be used. For processing only for IE6, JavaScript can be written in CSS through IE's unique expresstion, thereby changing the top value in real time to simulate a fixed effect. However, IE6 reloads CSS when scrolling or resizing the browser, so use background-attachment:fixed in the body to load CSS before re-rendering the page.

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     // top值为想要固定定位的位置，设置left同理，设置right与bottom需要通过scrollLeft及scrollTop进行计算，如下注释14 15     // 固定左：_left:expression(eval(documentElement.scrollLeft));16 17     // 固定右：_left:expression(eval(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth));18 19     // 固定下：_top:expression(eval(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight));20 21 }

The above is the perfect solution to the fixed method under IE6. If you have any questions or concerns please leave a message.