Home > Developer > JavaScript
Method 1: pure CSS
At present, there are many such solutions on the Internet (pure CSS ):
Copy codeThe Code is as follows:
Html {overflow: hidden ;}
Body {height: 100%; overflow: auto ;}
# Rightform form {position: absolute; right: 30px; top50px ;}
This method has a bug unsolved: in IE6, all position: absolute will be changed to "floating" elements, and objects will flash when rolling the scroll bar using js methods, the following methods combine CSS and js to solve the above problems.
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.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 a blank browser page as the background */
_ Background-attachment: fixed;/* prevent screen flash in IE6 ensure that elements do not flash when the scroll bar is rolling */
}
# TopNav {
Width: 980px;
Z-index: 100;/* Set floating level */
Overflow: visible;
Position: fixed;
Top: 50px;/* locate in other browsers. You can set coordinates here */
_ Position: absolute;/* IE6 simulate fixed with absolute */
_ Top: expression (documentElement. scrollTop + 50 + "px");/* IE6 dynamically sets the top position */
/* DocumentElement. scrollTop always sets the floating element at the top of the browser. You can add a value to achieve the typographical 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>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Br/>
<Div class = "show"> show </div>
</Body>
</Html>
Only fixed in the vertical direction is implemented. To implement horizontal fixed, SET _ left: expression (documentElement. scrollLeft + "px ");
You can set a fixed background for <body> to prevent flashing when the scroll bar is rolling. If you want to set a scrolling background in <body>, you can write the code in the html selector, for example:
Copy codeThe 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;
}
Method 2 JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.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.doc umentElement. scrollTop) + n + 'px ';}
Window. onresize = function () {obj. style. top = (document. body. scrollTop | document.doc umentElement. 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>
<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 is fixed! Pull the scroll bar to see the effect. </Div>
</Body>
</Html>
Ie6's perfect solution for postion: fixed
Today, I went to a foreign site and saw that the website was very smooth but not js. I was curious. It turned out to be .. Clever. In terms of sharing, resources are relatively saved. However, it works well and is easy to use, taking into account w3c. Haha
<! -- Compliance patch for microsoft browsers -->
<! -- [If lt IE 7]> <link rel = "stylesheet" href = "ie-stuff.css" type = "text/css" media = "screen"/> <! [Endif] -->
Ie-stuff.css
Copy codeThe 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 );
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
