Home > Developer > JavaScript
First, the position of this element is fixed.
Top is (clientHeight-elem.offsetHeight)/2 (that is, the element is in the middle of the browser, this is fixed)
Left is (clientWidht-subject width)/2 + Subject width + left margin. The left margin can be set to positive or negative, if it is a negative number, the absolute value equals the subject width + elem. offsetWidht, then the elements are just floating on the left side of the page body. When it is set to 0, the elements are just floating on the right side of the page body.
However, ie6 does not support the fixed attribute in css. Fortunately, ie6 can be solved through the expresion expression.
Specific Code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "gb2312"/>
<Title> left and right floating elements </title>
<Style type = "text/css">
Html {_ background-image: url (about: blank); _ background-attachment: fixed;/* solve the jitter during window scrolling for ie6 */}
Body {margin: 0; padding: 0 ;}
. Box-wrap {width: 990px; margin: 0 auto; height: 5000px; background: #999 ;}
. Pos-id {width: 50px; height: 200px; line-height: 200px; background: # F00;
/* For ie6 */
_ Position: absolute;
_ Bottom: auto;
_ Top: expression(eval(document.documentelement.scrolltop.pdf (document.doc umentElement. clientHeight-this.offsetHeight)/2-
(ParseInt (this. currentStyle. marginTop) | 0)-(parseInt (this. currentStyle. marginBottom) | 0 )));
/* "_ Top" indicates the vertical center line of the browser, and "left" is defined in js */
}
. Pos-id a {color: # FFF; font-size: 12px ;}
</Style>
</Head>
<Body>
<Div class = "box-wrap" id = "box-wrap">
<Div class = "pos-id" id = "pos-id">
<A href = "http://www.jb51.net/" title = "文 target" target = "_ blank"> 文 </a>
</Div>
</Div>
<Script language = "javascript">
Window. onload = function (){
/*
----------------------------------
Function that defines the position of the floating elements on the left and right of a browser relative to the width of the page body.
----------------------------------
*/
Function setScrollDivPos (elemId_str, main_width, m_left ){
// Customize a function for getting Elements
$ = Function (id) {return document. getElementById (id );};
// Obtain the browser's browser size in standard and mixed modes
Var c_width = document.doc umentElement. clientWidth | document. body. clientWidth;
Var c_height = document.doc umentElement. clientHeight | document. body. clientHeight;
// Obtain the hidden pixel size at the top of the browser when scrolling
// Var s_top = document.doc umentElement. scrollTop | document. body. scrollTop;
// Get the browser's viewwidth minus half of the page's theme width
Var half_width = (c_width-main_width)/2;
// Obtain half of the browser's view height
Var half_height = c_height/2;
// Obtain the height of an element
Var elem_height = $ (elemId_str). offsetHeight;
// Obtain the relative position of the element to the page body (left and top)
Var pos_left = main_width + half_width + m_left + "px ";
Var pos_top = (c_height-elem_height)/2 + "px ";
// Obtain the scroll size at the top of the browser
// Var s_top = document.doc umentElement. scrollTop | document. body. scrollTop;
// Positioning and layout the elements
If (window. XMLHttpRequest ){
Optional (elemid_str).style.css Text = 'position: fixed; top: '+ pos_top +'; left: '+ pos_left + ';';
} Else {
Optional (elemid_str).style.css Text = '; left:' + pos_left + ';';
}
}
// Define the elements whose id is pos-id on the left side of the theme whose width is 990px
// SetScrollDivPos ("pos-id", 990,-1040 );
// Define the elements whose id is pos-id on the right side of the page subject whose width is 990px
SetScrollDivPos ("pos-id", 990,0 );
}
</Script>
</Body>
</Html>
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
