admin管理员组文章数量:1530961
2024年6月11日发(作者：)
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()
{
mentById('menu'). = parseInt(g_T
op) + 10 + "px";
}
g_myBodyInstance = (ntElement ? ntElement : win
dow);
g_ll = page_scroll;
/*
注:
# 页面具有 DTD（或者说指定了 DOCTYPE）时，使用 ntElement。
# 页面不具有 DTD（或者说没有指定了 DOCTYPE）时，使用 。
*/
整段代码演示:
1
2
3
9
10
11
12
15
30
31
分析:这种实现通过编程的方式来处理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;/* 必须 */
}
整段代码演示:
1
ml11/DTD/">
2
3
4
15
22
23
24
25
26
34
35
38
39
分析: position:absolute;在IE6下只能起到固定元素位置的用处,但是在
height:100%;overflow-y:auto;的共同作用下,它竟然使元素也能浮动起来了!并且在IE6浏
览器下的跟随滚动条移动也是平滑的! 这种方式很强大,但是有可能会影响整个网页的布局,使
用这种方式的时候要小心.
转自：
/techmango/article/CSS_DHTML/float_layer_position_absolu
te_onscroll_css_
版权声明：本文标题：CSS在网页上实现浮动层跟随滚动条特效(兼容IE6) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1718065220a640002.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论