1、CSS 实现浮动层跟随滚动条特效(兼容 IE6)众所周知,很多网站要做个浮动层(可以放置广告)，并且能跟随滚动条移动，这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器：onScroll 脚本实现首先，用 DW 辅助可生成一个浮动层 Div 的样式:#menuposition:fixed;/*低版本浏览器不支持*/_position:absolute;/*利用 hack 方式处理 IE6*/left:100px;border:1px black solid;width:200px;height:115px;z-i
2、ndex:1;然后实现跟随滚动条移动，为 onScroll 事件绑定一个方法.function page_scroll()document.getElementById(menu).style.top = parseInt(g_myBodyInstance.scrollTop) + 10 + “px“;g_myBodyInstance = (document.documentElement ? document.documentElement : window);g_myBodyInstance.onscroll = page_scroll;/*注:# 页面具有 DTD（或者说指定了 DOCT
3、YPE）时，使用 document.documentElement。# 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。*/整段代码演示:1 2 3 4 #menu5 6 position:fixed;_position:absolute;left:100px;border:1px black solid;width:200px;height:115px;z-index:1;7 8 9 10 11 12 13 Hello world!14 15 16 document.write(“);17 for(var i=0;i“);20 21 documen
4、t.write(“);22 23 function page_scroll()24 25 document.getElementById(menu).style.top = parseInt(g_myBodyInstance.scrollTop) + “px“;26 27 g_myBodyInstance = (document.body ? document.body : window);28 g_myBodyInstance.onscroll = page_scroll;29 30 31 分析:这种实现通过编程的方式来处理 IE6 下跟随滚动条移动的问题:它利用了 hack 写法_posi
5、tion:absolute;在 onscroll 事件中设置目标的位置;而在 IE6 以上版本或者其它firefox,Chrome,Safari,Opera 浏览器下,编程方式却变为无效,通过 CSS 样式position:fixed;就能实现浮动且能 跟随滚动条移动.这种方式简单 ,不需要控制太多的样式,只不过在 IE6 滚动时不够平滑.2. 全 CSS 实现这种方式使用几个特殊的 CSS 来解决 IE6 下跟随滚动条移动的问题:1) position:absolute;让 IE6 相信 absolute 就是 fixed.2)body margin:0; /* 必须 */height:10
6、0%; /* 必须 */overflow-y:auto;/* 必须 */整段代码演示: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 认识 */16 17 /*/20 document.write(“);fo
7、r(var i=0;i“);document.write(“);分析: position:absolute;在 IE6 下只能起到固定元素位置的用处,但是在height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了 !并且在 IE6 浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小心.转自：http:/ 随滚动条移动“document.write(str);var div = document.getElementsByTagName(“div“)0;var y = parseInt(div.style.top);setInterval(function()var cy = parseInt(div.style.top);var dy = document.body.scrollTop | document.documentElement.scrollTop;div.style.top = (cy + (dy -(cy-y)*0.1) + “px“;,10);/
