Home > Developer > JavaScript
In fact, this effect can be seen in many websites. It mainly shows floating advertisements on both sides of the webpage. It seems difficult, but the principle is actually very simple. The timer does not detect the layer position in 0.1 seconds and set it to the specified position (relative to the window ). I wrote a simple code:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en"> <pead> <title> </pead> <body> <p> </ p> </p> <p> </p> <p> </p> <p> </p> renting an advertisement space </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Note:
If (window. innerHeight ){
PosX = window. pageXOffset;
PosY = window. pageYOffset;
}
Else if (document.doc umentElement & document.doc umentElement. scrollTop ){
PosX = document.doc umentElement. scrollLeft;
PosY = document.doc umentElement. scrollTop;
}
Else if (document. body ){
PosX = document. body. scrollLeft;
PosY = document. body. scrollTop;
}
This Code is intended to be compatible with the standard. On the xhtml page, document. body. scrollTop is always 0, that is, this attribute is invalid. Therefore, it must be determined by other attributes. to be compatible with the new and old standards, the availability of the attributes should be determined.
Reference a text on the Internet:
Reference
Applying WEB standards will invalidate the ScrollTop attribute !!!
<! 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">
After this section is added, document. body. scrollTop is always equal to 0.
Body onscroll = "alert (document. body. scrollTop);" will never be triggered.
Solution:
Usage:
Document.doc umentElement. scrollTop
Example 1:
Var scrollPos;
If (typeof window. pageYOffset! = 'Undefined '){
ScrollPos = window. pageYOffset;
}
Else if (typeof document. compatMode! = 'Undefined '&&
Document. compatMode! = 'Background '){
ScrollPos = document.doc umentElement. scrollTop;
}
Else if (typeof document. body! = 'Undefined '){
ScrollPos = document. body. scrollTop;
}
Alert (scrollPos );
Example 2:
Function WebForm_GetScrollX ()
{
If (_ nonMSDOMBrowser)
{
Return window. pageXOffset;
}
Else
{
If (document.doc umentElement & document.doc umentElement. scrollLeft)
{
Return document.doc umentElement. scrollLeft;
}
Else if (document. body)
{
Return document. body. scrollLeft;
}
}
Return 0;
}
-------------------------------------
PageYOffset is from netscape.
Document.body.scrolltopand document.doc umentElement. scrollTop are ie, but I don't know the real differences between them. I only know that documentElement. scrollTop is xhtml compatible (I use strict)
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
