众所周知,很多网站要做个浮动层(可以放置广告),并且能跟随滚动条移动,这样才能使用户在任何位置都能看到它(广告), 实现这种特效有许多种方法,下面就介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器: 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滚动时不够平滑. (责任编辑:好模板) |