本文解析JavaScript实现网页两侧浮动广告的原理，重点解决XHTML标准下document.body.scrollTop失效的问题。通过对比window.pageYOffset、document.documentElement.scrollTop及document.body.scrollTop的兼容性，提供多浏览器环境下的滚动位置获取方案，确保浮动层随页面滚动准确定位。
JavaScript实现跟随滚动条的浮动层技术详解
许多网站中常见一种网页两侧浮动广告效果，其原理并不复杂。核心思路是利用定时器，每隔0.1秒检测目标层相对于窗口的位置，并动态更新其坐标以实现跟随滚动。以下是一个基础实现示例：
<!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" xml:lang="en" lang="en"> <head> <title></title> </head> <body> <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> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
需要注意以下兼容性问题：
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标准下的滚动兼容性问题
上述代码旨在兼容不同标准。在XHTML页面中，document.body.scrollTop属性通常返回0，导致该属性无效。因此，必须通过判断其他属性的可用性来确定滚动位置，以兼容新旧浏览器标准。
引用网上的一段文字：
引用
应用WEB标准会使ScrollTop属性失效！！！
<!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">
添加上述DOCTYPE声明后，document.body.scrollTop的值将始终为0。
此时，body onscroll = "alert(document.body.scrollTop);"事件将永远不会触发。
解决办法：
使用：
document.documentElement.scrollTop
获取滚动位置的代码示例
示例一：
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
alert(scrollPos);
示例二：
function WebForm_GetScrollX()
{
if (__nonMSDOMBrowser)
{
return window.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
{
return document.documentElement.scrollLeft;
}
else if (document.body)
{
return document.body.scrollLeft;
}
}
return 0;
}
-------------------------------------
pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的，但我不知道他们的真正区别，只知道documentElement.scrollTop是xhtml兼容的（我用的是strict）