这篇博客介绍了如何使用JavaScript实现一个跟随滚动条移动的网页侧边广告页。作者在实现过程中遇到了在XHTML DOCTYPE下document.body.scrollTop始终为0的问题，只有在HTML DOCTYPE下才能正常获取滚动条位置。通过设置定时器调整广告页对象的位置，以保持其始终在屏幕可见范围内。
最近尝试着去实现一个在停留在网页侧边的广告页，这个广告页随着滚动条的移动而不断调整自身的位置，从而一直保持在屏幕范围内。
主要原理是设置一个定时器，根据document.body.scrollTop的变化去调整广告页对象的posTop属性。
中间遇到一个问题比较奇怪，发现DOCTYPE为XHTML时document.body.scrollTop总是为0，只有当DOCTYPE为HTML时document.body.scrollTop
的值才会随着滚动条的滑动而变化。
网页源代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的减肥经历 </title>
<meta name="keywords" content="" />
<meta name="description" content="我的减肥经历" />
<script language=javascript>
dt3_img="/swissgear/article/left.jpg" //左边图片
dt4_img="/swissgear/article/right.jpg" //右边
function duilianload()
{
sidebar3.style.top=250; //离顶部距离
sidebar3.style.left=5; //离左边距离
sidebar4.style.top=250;
sidebar4.style.right=5; //右边距离
}
function MoveLayer(layerName)
{
var y = 250;//浮动广告层固定于浏览器的y方向位置
var diff = (document.body.scrollTop + y - eval("document.all." + layerName + ".style.posTop"))*0.93;
//alert(document.all.sidebar3.style.posTop);
var y = document.body.scrollTop + y - diff;
// var y = document.body.scrollTop + 50;
eval("document.all." + layerName + ".style.posTop = y");
setTimeout("MoveLayer('"+layerName+"');", 10);//设置20毫秒后再调用函数MoveLayer()
}
if(document.all && window.screen.width>800)
{
//图片对联
document.write("<div id=sidebar3 style='position: absolute;visibility:visible;z-index:2;border:1px solid #ccc;'><a href='http://www.alimama.com/' target='_blank'><img src='http
最低0.47元/天 解锁文章
2381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
