<html> <head> <meta charset="utf-8"> <title>html</title> <style type="text/css"> .div1{ height:200px; width:200px; background:#f00; } .div2{ height:1400px; background:#06f; margin:20px 0px; position:relative; } .div2 #u{ position:absolute; top:30px; right:10px; width:80px; height:80px; background:#f00; } </style> <script type="text/javascript"> window.onload=function(){ var oDiv2=document.getElementsByClassName("div2")[0]; var oU=document.getElementById("u"); document.onscroll=function(ev){ var scTop=document.body.scrollTop||document.documentElement.scrollTop; if(scTop>oDiv2.offsetTop && scTop<(oDiv2.offsetTop+oDiv2.offsetHeight)){ oU.style['position']="fixed"; oU.style['top']="30px"; }else{ oU.style['position']="position"; oU.style['top']="30px"; document.title=scTop; } } }; </script> </head> <body> <div class="div1" style="height:600px;background:#f30;"> </div> <div class="div2"> <div id="u"></div> </div> </body> </html>
当页面滚动的时候,一个div 固定在这个位置,不动