CSS实现浮动层跟随滚动条特效(兼容IE6)
众所周知,很多网站要做个浮动层(可以放置广告)，并且能跟随滚动条移动，这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器：
１．onScroll脚本实现
首先，用DW辅助可生成一个浮动层Div的样式:
position:fixed;/*低版本浏览器不支持*/
_position:absolute;/*利用hack方式处理IE6*/
left:100px;border:1px black solid;width:200px;height:115px;z-index:1;
}
然后实现跟随滚动条移动，为onScroll事件绑定一个方法.
{
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。
*/
整段代码演示:
View Code
2 <head>
3 <style>
4 #menu
5 {
6 position:fixed;_position:absolute;left:100px;border:1px black solid;width:200px;height:115px;z-index:1;
7 }
8 </style>
9 </head>
10
11 <body>
12 <div id="menu">
13 Hello world!!!
14 </div>
15 <script>
16 document.write("<ul style='list-style-type:decimal'>");
17 for(var i=0;i<300;i++)
18 {
19 document.write("<li></li>");
20 }
21 document.write("</ul>");
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 </script>
30 </body>
31 </html>
分析:这种实现通过编程的方式来处理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)body {
margin:0; /* 必须 */
height:100%; /* 必须 */
overflow-y:auto;/* 必须 */
}
整段代码演示:
View Code
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
3 <head>
4 <style type="text/css">
5 body {
6 margin:0; /* 必须 */
7 border:0;
8 height:100%; /* 必须 */
9 overflow-y:auto;/* 必须 */
10 }
11 #menu {display:block; top:10px; left:150px; width:130px; position:fixed;} /* IE并不认识fixed，而FF认识 */
12 * html #menu {position:absolute;} /* 这个只有IE认识 */
13
14 </style>
15 <!--[if IE 6]>
16 <style type="text/css">
17 /*<![CDATA[*/
18 html {overflow-x:auto; overflow-y:hidden;} /*用来隐藏html的滚动条*/
19 /*]]>*/
20 </style>
21 <![endif]-->
22 </head>
23
24 <body>
25 <div>
26 <script>
27 document.write("<ul style='list-style-type:decimal'>");
28 for(var i=0;i<300;i++)
29 {
30 document.write("<li></li>");
31 }
32 document.write("</ul>");
33 </script>
34 </div>
35 <div id="menu">
36 <img src="http://images.cnblogs.com/cnblogs_com/goodspeed/795/o_o_mylogo.gif" />
37 </div>
38 </body>
39 </html>
分析: position:absolute;在IE6下只能起到固定元素位置的用处,但是在height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了!并且在IE6浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小心.
http://casengine.com/techmango/article/CSS_DHTML/float_layer_position_absolute_onscroll_css_IE6.htm
