作为程序员一定要保持良好的睡眠,才能好编程

鼠标滚动 固定menu或一个广告

发布时间:2017-04-23

<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 固定在这个位置,不动