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

最新推荐文章于 2022-05-05 14:41:54 发布

weixin_30279751

最新推荐文章于 2022-05-05 14:41:54 发布

阅读量355

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/techmango/archive/2011/05/24/float_layer_position_absolute_onscroll_css_IE6.html

版权

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

１．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滚动时不够平滑.

2. 全CSS实现

这种方式使用几个特殊的CSS来解决IE6下跟随滚动条移动的问题:

1) position:absolute;让IE6相信absolute就是fixed.

2)body {
    margin:0;  /* 必须 */
    height:100%; /* 必须 */
    overflow-y:auto;/* 必须 */
    }

整段代码演示:

View Code

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
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 
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

转载于:https://www.cnblogs.com/techmango/archive/2011/05/24/float_layer_position_absolute_onscroll_css_IE6.html