首页 > 代码库 > 通过js实现置顶方法

通过js实现置顶方法

2024-08-27 21:37:36   219人阅读

  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=http://www.mamicode.com/"###">导航一</a><br />  
  26. <a href=http://www.mamicode.com/"###">导航二</a><br />  
  27. <a href=http://www.mamicode.com/"###">导航三</a><br />  
  28. <a href=http://www.mamicode.com/"###">导航四</a><br />  
  29. </div>  
  30.   
  31. <p style="height:1000px">当页面出现滚动条的时候，菜单依然置顶<br />默认为左上角置顶，当为id="scrollmenu"的style添加属性right:0则右上角置顶</p>  
  32.   
  33.   
  34. </body>  
  35. </html>  

通过js实现置顶方法


联系
我们