js+css置顶效果、纯css置顶效果

在网页高度超长的情况下,为了良好的用户体验我们经常需要用到“置顶效果”

 不多说,直接上DEMO代码:

  1. <!DOCTYPE html   
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  4. <html>   
  5. <head>   
  6. <script type="text/javascript">   
  7. var timer   
  8. function scrolltop()   
  9. {   
  10. document.getElementById('scrollmenu').style.top=document.documentElement.scrollTop || document.body.scrollTop || 0;   
  11. //兼容写法。页面具有DTD时,使用document.documentElement.scrollTop;没有指定DTD时使用document.body.scrollTop,所以用## || ## || 0 兼容   
  12. timer=setTimeout("scrolltop()",1) //1毫秒调用一次scrolltop()方法   
  13. }   
  14. function stoptimer()   
  15. {   
  16. clearTimeout(timer)   
  17. }   
  18. </script>   
  19. </head>   
  20.    
  21. <body onload="scrolltop()" onunload="stoptimer()">   
  22.    
  23. <div id="scrollmenu" style="position:absolute;">   
  24. <b>置顶菜单</b><br />   
  25. <a href="###">导航一</a><br />   
  26. <a href="###">导航二</a><br />   
  27. <a href="###">导航三</a><br />   
  28. <a href="###">导航四</a><br />   
  29. </div>   
  30.    
  31. <p style="height:1000px">当页面出现滚动条的时候,菜单依然置顶<br />默认为左上角置顶,当为id="scrollmenu"的style添加属性right:0则右上角置顶</p>   
  32.    
  33.    
  34. </body>   
  35. </html 

另外,纯css也可以实现类似效果(兼容ie浏览器哦o(∩_∩)o ):

  1. .fixed{*width:100%position:fixed_position:absolute; top:0; _top:expression(eval(document.documentElement.scrollTop)); z-index:10;}/*兼容ie的纯css置顶效果*/ 

 

 

相关经验

导读书签
书签初始化中…