<style type="text/css"> .div1 { height:2000px; } .div2 { width:200px; height:200px; background-color:#3399FF; margin-top:100px; } .div2_1{ position:fixed; width:200px; height:200px; z-index:999; background-color:#3399FF; top:0px; _position:absolute; _bottom:auto; _top:[removed]eval(document.documentElement.scrollTop)); } </style> <script type="text/javascript"> window.onscroll=function(){ var t=document.documentElement.scrollTop||document.body.scrollTop; var div2=document.getElementById("div2"); if(t>= 100){ div2.className = "div2_1"; }else{ div2.className = "div2"; } } </script> <div class="div1"> <div id="div2" class="div2"></div> </div>