<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .menu{ top:200px ; height:100px ; background:darkgoldenrod ; position: absolute; width:100% ; } </style> </head> <body> <div class="menu" id="menu"> </div> </body> <script type="text/javascript"> for (var i=0;i<3000;i++) { document.write(i+"<br />") } //根据指定的 id 属性值得到对象 var box=document.getElementById("menu"); //当滚动条移动时触发 window.onscroll=function(){ //获取滚动条位置 var top = document.documentElement.scrollTop||document.body.scrollTop; if (top>=200) { box.style.top=top+"px"; } else{ box.style.top="200px"; } } </script> </html>
运行: