JS and CSS three methods to solve the position: Fixed bug and flash problem in IE6

In IE6, the position: Fixed bug should be an old problem. However, it took me a lot of time to write the back button (always flashing) for the waterfall stream plug-in today. I have also written an article to solve this problem, but I used CSS expressions to solve it, the current requirement is to dynamically locate in JS, so the previous method is not very suitable. Summary:

Method 1: pure CSS

*html{height:100%;overflow:hidden;}*html body{height:100%;overflow:auto;}

Principle: the scroll bar you drag is not the whole page, but the scroll bar of the body.

Advantages: Excellent visual effects, less code, no performance consumption

Disadvantage: The onscroll event is not triggered (because HTML does not scroll), which may affect some JS components. The fixed positioning layer must be located based on the body layer.

Method 2: CSS + expression

Perfect solution to the position: Fixed bug in IE6 and the flash Problem

Principle: IE6 uses absolute positioning and CSS expressions to calculate corresponding values

Advantages: Excellent visual effects and strong compatibility

Disadvantages: relatively high performance consumption, not flexible enough, and you may encounter such a bug (click to view)

Method 3: JS

View code

// Usage: // fixedposition (ELEM, {top: 0, left: 0}); // fixedposition (ELEM, {bottom: 0, right: 0 }); vaR fixedposition = function () {var html = document. getelementsbytagname ('html') [0], DD = document.doc umentelement, DB = document. body, Doc = dd | dB; // provide IE6 fixed with a "non-Jitters environment" // you only need to use the static background of the HTML and body tags to move the elements on the scroll bar of IE6 without any jitter. // note: IE6 if the background image has been set to static position and the HTML Tag is returned, the background static (fixed) of the body will be invalidated if (isie6 & DB. currentstyle. backgroundattachment! = 'Fixed') {HTML. style. backgroundimage = 'url (about: blank) '; html. style. backgroundattachment = 'fixed';}; // Pos = {top: 0, right: 0, bottom: 0, left: 0} return isie6? Function (ELEM, POS) {var style = ELEM. style, dom = '(document.doc umentelement | document. Body) '; If (typeof pos. Left! = 'Number') {pos. Left = Doc. clientwidth-pos. Right-ELEM. offsetwidth;} If (typeof pos. Top! = 'Number') {pos. top = Doc. clientheight-pos. bottom-ELEM. offsetheight;} ELEM. style. position = 'absolute '; style. removeexpression ('left'); style. removeexpression ('top'); style. setexpression ('left', 'eval ('+ DOM + '. scrollleft + '+ POS. left + ') + "PX"'); style. setexpression ('top', 'eval ('+ DOM + '. scrolltop + '+ POS. top + ') + "PX"');}: function (ELEM, POS) {var style = ELEM. style; style. position = 'fixed'; If (typeof POS. left = 'number') {style. left = POS. left + 'px ';} else {style. left = 'auto'; style. right = POS. right + 'px ';} If (typeof POS. top = 'number') {style. top = POS. top + 'px ';} else {style. top = 'auto'; style. bottom = POS. bottom + 'px ';}};}();

Principle: the principle is the same as above. The expression is dynamically set. If the top, left, bottom, and right of the positioning layer are directly set in the onscroll event, the positioning layer will flash;

Advantage: dynamically controlling the location of the positioning Layer

Disadvantage: CSS expressions are used.

Method 4: discard IE6

Principle: The Source of the bug should be eliminated

Advantage: completely eradicate bugs

Disadvantage: None

Extension: Solution

Http://bbs.blueidea.com/thread-2938030-1-1.html

Principle: I don't understand it. I guess it is related to the repaints of the browser and the reflows of the browser.

 

If you have other better ways to share your experience, please join the Web Front-end communication group (75701468.