CSS在网页上实现浮动层跟随滚动条特效(兼容IE6).doc

CSS实现浮动层跟随滚动条特效(兼容IE6)众所周知,很多网站要做个浮动层(可以放置广告)，并且能跟随滚动条移动，这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器：onScroll脚本实现首先，用DW辅助可生成一个浮动层Div的样式:#menuposition:fixed;/*低版本浏览器不支持*/_position:absolute;/*利用hack方式处理IE6*/left:100px;border:1px black solid;width:200px;height:115px;z-index:1;然后实现跟随滚动条移动，为onScroll事件绑定一个方法.functionpage_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（或者说指定了 DOCTYPE）时，使用 document.documentElement。# 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。*/整段代码演示:1234#menu56position:fixed;_position:absolute;left:100px;border:1px black solid;width:200px;height:115px;z-index:1;78910111213Hello world!141516document.write();17for(vari=0;i300;i+)1819document.write();2021document.write();2223functionpage_scroll()2425document.getElementById(menu).style.top=parseInt(g_myBodyInstance.scrollTop)+px;2627g_myBodyInstance=(document.body?document.body : window);28g_myBodyInstance.onscroll=page_scroll;293031分析:这种实现通过编程的方式来处理IE6下跟随滚动条移动的问题:它利用了hack写法_position:absolute;在onscroll事件中设置目标的位置;而在IE6以上版本或者其它firefox,Chrome,Safari,Opera浏览器下,编程方式却变为无效,通过CSS样式position:fixed;就能实现浮动且能跟随滚动条移动.这种方式简单,不需要控制太多的样式,只不过在IE6滚动时不够平滑.2. 全CSS实现这种方式使用几个特殊的CSS来解决IE6下跟随滚动条移动的问题:1)position:absolute;让IE6相信absolute就是fixed.2)bodymargin:0;/*必须*/height:100%;/*必须*/overflow-y:auto;/*必须*/整段代码演示:12345body6margin:0;/*必须*/7border:0;8height:100%;/*必须*/9overflow-y:auto;/*必须*/1011#menudisplay:block;top:10px;left:150px;width:130px;position:fixed;/*IE并不认识fixed，而FF认识*/12* html #menuposition:absolute;/*这个只有IE认识*/1314151617/*/2021222324252627document.write();28for(vari=0;i300;i+)2930document.write();3132document.write();33343536373839分析:position:absolute;在IE6下只能起到固定元素位置的用处,但是在height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了!并且在IE6浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小