资源描述
CSS实现浮动层跟随滚动条特效(兼容IE6)
众所周知,很多网站要做个浮动层(可以放置广告)，并且能跟随滚动条移动，这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器：
１．onScroll脚本实现
首先，用DW辅助可生成一个浮动层Div的样式:
#menu{
position:fixed;/*低版本浏览器不支持*/
_position:absolute;/*利用hack方式处理IE6*/
left:100px;border:1px black solid;width:200px;height:115px;z-index: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（或者说指定了 DOCTYPE）时，使用 document.documentElement。
# 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 document.body。
*/
整段代码演示:
1 <html xmlns="http://www.w3.org/1999/xhtml" >
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;/* 必须 */
}
整段代码演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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]>
16 <style type="text/css">
17 /*<![CDATA[*/
18 html {overflow-x:auto; overflow-y:hidden;} /*用来隐藏html的滚动条*/
19 /*]]>*/
20 </style>
<![endif]-->
</head>
<body>
<div>
<script>
document.write("<ul style='list-style-type:decimal'>");
for(var i=0;i<300;i++)
{
document.write("<li></li>");
}
document.write("</ul>");
</script>
</div>
<div id="menu">
<img src=" />
</div>
</body>
</html>
分析: position:absolute;在IE6下只能起到固定元素位置的用处,但是在height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了!并且在IE6浏览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使用这种方式的时候要小心.
转自：
div随滚动条移动
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="width:100px;height:100px;position:absolute;right:20px;top:80px;background:#FFCC00;border:1px solid #999;"></div>
<script type="text/javascript">
<!--
var i=0, str="";while(i++<100){str+="<br>"}
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);
//-->
</script>
</body>
</html>
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
