浮动广告是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时，这种在页面上浮动的广告，可以跟随屏幕一起移动。
制作浮动广告,看起来不是一个很困难的任务.但它却花了我近6个小时的时间。
刚接到这个需求时，我就想起我已前的Javascript代码
{
oDiv.style.top = parseInt(document.body.scrollTop) + 10;
}
window.document.body.onscroll = page_scroll;
奇怪的事情就是window.document.body.onscroll在我的IE浏览器里根本就不触发。
原来在Visual Studio 2005中默认的DOCTYPE声明是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
而不是Visual Studio 2003中的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
如果使用2005中默认的DOCTYPE声明根本就不触发onscroll事件。看起来我只有一个选择，使用2003的DOCTYPE声明。
但是我的css样式表全部是基于2005的DOCTYPE声明，如果切换到2003的DOCTYPE声明工作量将不是一般的大。
只有google一下，看一看有没有人和我一样的遭遇
果然没有失望在http://www.zeali.net/blog/entry.php?id=62中提出了两个解决方案
1 使用setInterval或者setTimeout来不停的改变这个浮动层的位置
2 CSS属性值position的fixed属性让该层能够始终位于窗口的指定位置
第一个方案马上被否决，回为这太占资源。
第二个方案看起来挺美，可惜ＩＥ并不支持。不过在FireFox中的效果的确不错。正如文章在所说"从显示效果来看，在Firefox上的显示效果比IE中通过onscroll触发层的位置移动处理显示效果要好很多，看不到层的闪动。"
二个方案都不能用。只能继续寻找。终于找到完美解决的方案
代码如下
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<style type="text/css">
body {
margin:0; /* 必须 */
border:0;
height:100%; /* 必须 */
overflow-y:auto;/* 必须 */
}
#menu {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE并不认识fixed，而FF认识 */
* html #menu {position:absolute;} /* 这个只有IE认识 */
</style>
<!--[if IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div>
<ul style="list-style-type:decimal">
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<ul>
</div>
<div id="menu">
<img src="http://www.cnblogs.com/images/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
</div>
</body>
</html>
据说IE7已提供了fixed的支持。
使用上面的代码你必须注意
body里的元素不能有position:relative ，否则这个元素将不会滚动。
相关资料:
CSS positionfixed; for IE6
http://www.cssplay.co.uk/layouts/fixed.html
The position property
http://www.w3schools.com/css/pr_class_position.asp
Fixed positioning
http://www.w3.org/TR/REC-CSS2/visuren.html#fixed-positioning