The perfect solution for IE6 fixed_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

The perfect solution for IE6 fixed_javascript skills

May 16, 2016 pm 06:08 PM

fixed ie6

The first method: pure CSS
There are currently many solutions (pure CSS) on the Internet:

Copy code The code is as follows:

 
html{overflow:hidden;} 
body{height:100%;overflow:auto;} 
#rightform form{ position:absolute;right:30px;top50px;} 

This method has an unresolved bug: under IE6, all position:absolute will be turned into "floating" elements; there is also the use of js The object will flicker when the scroll bar is scrolled. The following method combines CSS and js to solve the above problem.

Copy code The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
< title>IE6 fixed</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body {
_background-image: url(about:blank); /*Use the browser blank page as the background*/
_background-attachment: fixed; /* prevent screen flash in IE6 to ensure that the scroll bar is scrolled , the element does not flash*/
}
#topNav {
width: 980px;
z-index: 100; /*Set floating level*/
overflow: visible;
position: fixed;
top: 50px; /* For positioning in other browsers, coordinates can be set here*/
_position: absolute; /*IE6 uses absolute to simulate fixed*/
_top: expression(documentElement .scrollTop 50 "px"); /*IE6 dynamically sets the top position*/
/* documentElement.scrollTop sets the floating element to always be at the top of the browser. You can add a value to achieve typesetting effect*/
background-color :#0000FF;
height: 31px;
}
.show{
position:absolute;
top:500px;
left:400px;
border:#ff0000 1px solid;
}
</style>
</head>
<body>
<div class="jd_menu" id="topNav">1111</ div>
 
 
 &lt ;br /> 
 
 
 
 
 
 
 &lt ;br /> 
<div class="show">show</div>
</body>
</html>

Only fixed in the vertical direction is implemented. To achieve horizontal fixed, set _left:expression(documentElement.scrollLeft "px");
Use a fixed background for <body> to prevent the scroll bar from flickering when scrolling; if <body> If you want to set the scrolling background and cause conflicts, you can write the code in the html selector, such as:

Copy the code The code is as follows :

 
html { 
_background-image: url(about:blank); 
_background-attachment: fixed; /* prevent screen flash in IE6 */ 
} 
body { 
background-image: url(1.jpg); 
background-attachment: scroll; 
} 

Second method JavaScript

Copy code The code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C/ /DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <style type="text/css"> 
body{ margin:0px; padding:0px; font-size:12px; line-height:22px;} 
p{ margin:0px; padding:36px ;} 
.float2{ position:absolute; padding:26px; border:#999999 3px solid; background-color:#3399FF; right:200px; top:200px;} 
.fixed{ position:absolute; right :60px; top:100px; border:#666666 3px solid; background-color:#CCCCCC; padding:26px;} 
</style> 
<script language="javascript" type="text/ javascript"> 
window.onload=function(){ 
var n=100; //top value
var obj=document.getElementById("fixed"); //position:fixed object
window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop) n 'px';} 
window.onresize=function(){obj.style. top=(document.body.scrollTop||document.documentElement.scrollTop) n 'px';} 
} 
</script> 
<title>position_fixed test</title> 
</head> 
<body> 
<p>Test content.........</p> 
<p>Test content..... ....</p> 
<p>Test content.........</p> 
<p>Test content......... </p> 
<p>Test content..........</p> 
<p>Test content..........</p&gt ; 
<p>Test content..........</p> 
<p>Test content..........</p> 
 <p>Test content.........</p> 
<p>Test content..........</p> 
<p> Test content.........</p> 
<p>Test content.........</p> 
<p>Test content.. .......</p> 
<p>Test content.........</p> 
<p>Test content... ...</p> 
<div class="float2">Floating content 2</div> 
<div class="fixed" id="fixed">My location It's fixed! Pull the scroll bar to see the effect. </div> 
</body> 
</html> 

ie6 perfect solution for postion:fixed
Go today A foreigner saw that his website was very smooth but had no js. He was curious, so it turns out. . It's so clever. Share it. It saves resources relatively speaking. But the effect is good, easy to use, and takes into account w3c. Haha

ie-stuff.css

Copy Code The code is as follows:

#footer { 
position: absolute; 
bottom: auto; 
clear: both; 
top :expression(eval(document.compatMode && 
document.compatMode=='CSS1Compat') ? 
documentElement.scrollTop 
 (documentElement.clientHeight-this.clientHeight) - 1 
: document.body. scrollTop 
 (document.body.clientHeight-this.clientHeight) - 1); 
} 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn