JavaScript는 스크롤바 스크롤 레이어를 따릅니다(플로팅 AD 효과)_javascript 기술

실제로 이 효과는 많은 웹사이트에서 주로 웹페이지 양쪽에 떠다니는 광고로 볼 수 있습니다. 어려워 보일 수도 있지만 원리는 사실 매우 간단합니다. 타이머를 사용하여 0.1초마다 레이어의 위치를 ​​감지하고 지정된 위치(창을 기준으로)에 배치합니다. 간단한 코드를 작성했습니다:

<title></title> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div id="ad" style="position:absolute;background:#eeeeee;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center"> </div>이 광고 공간은 임대용입니다
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
참고:
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement .scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body. scrollLeft;
posY = document.body.scrollTop;
}
이 코드는 xhtml 페이지에서 document.body.scrollTop이 항상 0이므로 속성이 유효하지 않습니다. 다른 속성을 판단하려면 기존 표준과 새 표준과 호환되도록 속성의 가용성을 판단해야 합니다.

인터넷 텍스트 인용:

인용

WEB 표준을 적용하면 ScrollTop 속성이 무효화됩니다! ! !
전환//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">


이 단락을 추가한 후 document.body.scrollTop은 항상 동일합니다. 0


body onscroll = "alert(document.body.scrollTop);"이 실행되지 않습니다.


해결책:

사용:

document.documentElement.scrollTop

예 1:

var scrollPos; >if (typeof window.pageYOffset != 'undefine') {
scrollPos = window.pageYOffset
}
else if (typeof document.compatMode != 'undefine' &&
document.compatMode ! = 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefine') {
scrollPos = document.body.scrollTop; 🎜>}
alert(scrollPos);


예 2:

function WebForm_GetScrollX()
{
if (__nonMSDOMBrowser)
{
return window.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
{                                                   > 롤왼쪽;                                   >}


----------------------------
pageYOffset은 netscape에서 가져온 것입니다.
document.body.scrollTop과 document.documentElement.scrollTop은 IE용이지만 documentElement.scrollTop이 xhtml과 호환된다는 것만 알고 있습니다(나는 strict를 사용합니다)