西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > 其他 >

CSS实现浮动层跟随滚动条特效(兼容IE6)

时间:2012-09-13 09:35来源:未知 作者:好模板 点击:
众所周知,很多网站要做个浮动层(可以放置广告),并且能 跟随滚动条移动 ,这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方

 

众所周知,很多网站要做个浮动层(可以放置广告),并且能跟随滚动条移动,这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器:

1.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。
*/
复制代码

整段代码演示:

View Code
复制代码
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滚动时不够平滑.

(责任编辑:好模板)

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------