How to position the fixed layer in js

You need to get the coordinates of some HTML objects to set the coordinates of the target layer more flexibly. Here you can use attributes such as document.body.scrolltop, but these attributes are in the standard page of XHTML or more simply with < ! DOCTYPE... > The value obtained in the tag is 0; If you don't want this tag and everything is fine, how do you get the body coordinates in XHTML? Of course, we can use document.documentelement instead of document.body. For example, we can say:

 
var top=document.documentElement.scrollTop ||document.body.scroolTop; 

|| in js is a good thing. It can be used not only in the conditional statement of if, but also in the assignment of variables. The above example can be written in the following format:

 
var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop; 

This can be written with good compatibility. Note: if you do not declare the document. The documentElement. ScrollTop value can show 0 instead.

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201406/20140615162554.gif? 2014515162612 ">

To get the vertical position of the scroll bar coordinate on the current page
Document. The documentElement. ScrollTop instead
Document. The body. The scrollTop;
Document.documentelement gets the HTML tag,
Document.body gets the body tag;
Under the standard w3c document. Body. ScrollTop constant is zero, need to use the document. The documentElement. ScrollTop instead;
If we want to locate the absolute position of the mouse relative to the page, most of what we get in the search engines will let you use it
Event. ClientX + document. Body. ScrollLeft event. ClientY + document. The body. The scrollTop;
If you find that the mouse has deviated from your expectations, it's not at all surprising, because IE5.5 no longer supports document.body.scrollx objects
So we have to add;

 
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; 
} 

Here are some of the parameters:
Visible area of the page width: document. Body. ClientWidth;
Visible area of the page height: document. Body. ClientHeight;
Page visible region wide: document. Body. OffsetWidth; (including the width of the edge);
High page visible area: the document. The body. OffsetHeight; (including the width of the edge);
Page of text in full width: document. Body. ScrollWidth;
High page of text in full: document. Body. ScrollHeight;
ScrollTop: document.body.scrolltop;
ScrollLeft: document.body.scrollleft;
In the body of the page: windows.screentop;
Page body left: Windows. ScreenLeft;
High screen resolution: windows.screen.height;
Width of screen resolution: windows.screen.widht;
Screen is available the workspace height: Windows. Screen. AvailHeight;
Screen available workspace width: Windows. Screen. AvailWidth;
Gets the scrolling height of the object: scrollHeight;
Sets or gets the distance between the left edge of the object and the far left end of the currently visible content in the window :scrollLeft;
Sets or gets the distance between the top of the object and the top of the visible content in the window :scrollTop;
Gets the scrollWidth of the object :scrollWidth;
Gets the height of the object relative to the layout or parent coordinates specified by the parent: offsetParent property: offsetHeight;
Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute :offsetLeft;
Gets the calculated top position of the object relative to the layout or the parent coordinate specified by the offsetTop attribute :offsetTop;
Event.clientx: horizontal coordinates relative to the document;
Event.clienty: vertical coordinates relative to the document;
Event.offsetx: horizontal coordinates with respect to the container;
Event.offsety: the vertical coordinates relative to the container;
Document. The documentElement. ScrollTop: set rolling vertical height
Event. ClientX + document. DocumentElement. ScrollTop: relative document level + vertical scroll;