如何实现div随页面浮动?

解决方案 »

  1.   


    // JavaScript Document
    lastScrollY=0;
    function heartBeat(){ 
    var diffY;
    if (document.documentElement && document.documentElement.scrollTop)
        diffY = document.documentElement.scrollTop;
    else if (document.body)
        diffY = document.body.scrollTop
    else
        {/*Netscape stuff*/}
        
    percent=.1*(diffY-lastScrollY); 
    if(percent>0)percent=Math.ceil(percent); 
    else percent=Math.floor(percent); 
    document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
    document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";lastScrollY=lastScrollY+percent; 
    }
    suspendcode12="<DIV id=\"lovexin12\" style='left:0px;POSITION:absolute;TOP:69px;'><img border=0 src=/img/left.jpg><br><a href=JavaScript:; onclick=\"lovexin12.style.visibility='hidden'\"><img border=0 src=/img/closead.gif></a></div>"suspendcode14="<DIV id=\"lovexin14\" style='right:0px;POSITION:absolute;TOP:69px;'><img border=0 src=/img/right.jpg><br><a href=JavaScript:; onclick=\"lovexin14.style.display = 'none'\"><img border=0 src=/img/closead.gif></a></div>"document.write(suspendcode12); 
    document.write(suspendcode14); 
    window.setInterval("heartBeat()",1);
      

  2.   

    JK的.......我测了下,ff2.0也没问题
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JK:支持民族工业,尽量少买X货</title><style>#glideDiv0 

    position: fixed; /*for firefox*/
    top: 200; 
    right:20;
    z-index:200; 
    width:28px;
    background-color:#E6EEE7;

    /*for ie*/
    * html #glideDiv0 {position:absolute}
    * html body {
    overflow: hidden;
    padding :0;
    margin:0;
    }
    * html div#wrap_outer {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0px 30px 30px 30px;
      }</style>
    </head><body>
    <div id="wrap_outer"><div style="font-size:10pt;">
    注1:固定Div,且scroll时Div不闪动。<br/> 注2:部分代码来自:http://www.javalobby.org/forums/thread.jspa?threadID=16484&tstart=0<br/>    
    注3:(注:这里有<a href="DivFixedInBody1.htm">scroll时Div闪动</a>的代码)<br/>    <br/>  
    注:本页面仅在IE6下测试过。其它浏览器或其它版本未经测试。<br/>           
    注-----:JK:<a href="mailTo:[email protected]?subject=About Body">[email protected]</a><br/>        
    <hr/>    
    </div>
    <!-- layers that slide go here. 
     Be sure to include id for each layer in style sheet in head --> 
    aaaaaaaa                                  
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa   
    <!-- end wrap_outer div--></div>
    <div id="glideDiv0" >         
    a<br>
    b<br>
    c<br>
    d<br>e<br>
    f<br>
    g<br>
    <br>
    </div><br/><br/> 
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa                   
    <br/><br/>aaaa   
    </body></html>