How to locate the position of the fixed layer in JS _javascript tips

Source: Internet
Author: User
You need to get the coordinates of some HTML objects to more flexibly set the coordinates of the target layer, where you can use attributes such as DOCUMENT.BODY.SCROLLTOP, but these attributes are in the standard Web page of XHTML or, more simply, with <! The value in the doctype...> tag is 0, and if you don't want this label to be normal, how do you get the body coordinates in XHTML? Of course, we use document.documentelement to replace document.body For example, you can write this:
Copy Code code as follows:

var Top=document.documentelement.scrolltop | | Document.body.scroolTop;

JS in the | | is a good thing that can be used not only in the conditional statements of if, but also in the assignment of variables, which can be written in the following format:
Copy Code code as follows:

var top=document.documentelement.scrolltop document.documentElement.scrollTop:document.body.scrollTop;

This can be very good compatibility of writing. Also note that if you do not declare the value of DOCUMENT.DOCUMENTELEMENT.SCROLLTOP, it will show 0.



Description to get the ordinate position of the scroll bar coordinates on the current page:
Document.documentElement.scrollTop, not with
Document.body.scrollTop;
Document.documentelement gets the HTML tag,
Document.body gets the body tag;
Under the standard, the DOCUMENT.BODY.SCROLLTOP constant is 0, which needs to be replaced by DOCUMENT.DOCUMENTELEMENT.SCROLLTOP;
If we want to locate the mouse relative to the page of the absolute position, will be in the search engine most will let you use
Event.clientx+document.body.scrollleft, Event.clienty+document.body.scrolltop;
If you find that your mouse is straying from your imagination, it's strange, because after IE5.5, you don't support Document.body.scrollX objects anymore.
So we have to add a sentence;
Copy Code code as follows:

if (document.body && document.body.scrollTop &&document.body.scrollleft)
{
Top=document.body.scrolltop;
Left=document.body.scrollleft;
}
if (document.documentelement && document.documentelement.scrolltop&& Document.documentElement.scrollLeft)
{
Top=document.documentelement.scrolltop;
Left=document.documentelement.scrollleft;
}

The following describes the use of some parameters:
Width of the visible area of the Web page: document.body.clientWidth;
Height of the visible area of the Web page: document.body.clientHeight;
Web page Visible area wide: document.body.offsetWidth (including the width of the sideline);
Page visible Area High: document.body.offsetHeight (including the width of the sideline);
Web page Full text width: document.body.scrollWidth;
The full text of the Web page is high: document.body.scrollHeight;
The Web page is rolled up high: document.body.scrollTop;
The pages are rolled away left: document.body.scrollLeft;
The main body part of the Web page: windows.screentop;
Page body part left: windows.screenleft;
High screen resolution: windows.screen.height;
Width of screen resolution: WINDOWS.SCREEN.WIDHT;
Screen available workspace height: windows.screen.availHeight;
Screen available working area width: windows.screen.availWidth;
Gets the scrolling height of the object: scrollheight;
Sets or gets the left distance between the left edge of the object and the current visible content in the window: scrollleft;
Sets or gets the distance between the top of the object and the topmost of the visible content in the window: scrolltop;
Gets the scrolling width of the object: ScrollWidth;
Gets the height of the parent coordinates specified by the object relative to the layout or by the parent coordinate: offsetparent property: offsetheight;
Gets the left position of the calculation of the object relative to the layout or the parent coordinates specified by the offsetparent property: offsetleft;
Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property: offsettop;
Event.clientx: Relative to the horizontal coordinate of the document;
Event.clienty: Relative to the vertical coordinates of the document;
Event.offsetx: Relative to the horizontal coordinate of the container;
Event.offsety: Relative to the vertical coordinate of the container;
Document.documentElement.scrollTop: Sets the vertical height of the scroll
Event.clientx + Document.documentElement.scrollTop: Relative to the document horizontal position + vertical direction of the amount of scrolling;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.