我现在有页面有个DIV,里面包着一些数据集,然后我想DIV可以像小广告一样随着滚动条的上下移动而移动,不断漂浮在页面的顶端,就是下面的表格随着滚动条的移动而移动   DIV的样式如下代码:
<div id="d1" style="width:100%;margin-top:10px;margin-bottom:10px;">
   <table>
       <tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
       <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
       <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
   </table>
</div>
该DIV外面还有2个DIV包着,有没有代码我只需要传入要漂浮的DIV的id就可以实现跟随滚动条的功能急!

解决方案 »

  1.   

    不要百度COPY的代码,如果把我这个DIV加上去可以漂浮测试了马上给分!!!
      

  2.   

    请google: jquery float 第一条http://www.36ria.com/1833
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><style>
    html,body{margin:0;padding:0;}
    #d1{position:fixed;top:82px;right:2px;width:100%;margin-top:10px;margin-bottom:10px}
    </style>
    <!--[if lte IE 6]>
    <style>
    #d1{position:absolute;top:82px;right:2px;}
    </style>
    <![endif]-->
    <body>
    <div id="d1">
      <table>
      <tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      </table>
    </div>
    <script>
    if(navigator.userAgent.indexOf("MSIE 6") >-1){
    window.onscroll=function(e){
     var t = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
     document.getElementById("d1").style.top = t+82+"px";
     }
    }
    </script>
      

  4.   

    有个jQuery版本的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="js/jQuery.js"></script></head><body>
    <div id="d1">
      <table>
      <tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      </table>
    </div>
    </body>
    <script type="text/javascript">
    var x=true,y=true //设置飘动方向
    $("#d1").css({
    'position':'absolute',
    'top':50,
    'left':50
    })
    function float(){
    var offset=$("#d1").offset(); if(offset.left==1000){x=false;}
    if(offset.left==50){x=true;}
    if(offset.top==700){y=false;}
    if(offset.top==50){y=true;}
    if (x&&y){
    $("#d1").css({top:'+=1'}).css({left:'+=1'})
    }
    if (x&&!y){
    $("#d1").css({top:'-=1'}).css({left:'+=1'})
    }
    if (!x&&!y){
    $("#d1").css({top:'-=1'}).css({left:'-=1'})
    }
    if (!x&&y){
    $("#d1").css({top:'-=1'}).css({left:'-=1'})
    }
    }
    var MyMar
    var speed=30
    MyMar2=setInterval(float,speed);
    </script>
    </html>
      

  5.   


    </script>
    <div id="d1" style="position:absolute;background:#eeeeee;border:1px dotted #000;">
      <table>
      <tr><th>测试</th><th>测试3</th><th>测试2</th></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      <tr><td>数据1</td><td>数据2</td><td>数据3</td></tr>
      </table>
    </div>
    <script type="text/javascript">
    function scrollImg(){
        var posX,posY;
        if (window.innerHeight) {
            posX = window.pageXOffset;
            posY = window.pageYOffset;
        }
        else if (document.documentElement && document.documentElement.scrollTop) {
            posX = document.documentElement.scrollLeft;
            posY = document.documentElement.scrollTop;
        }
        else if (document.body) {
            posX = document.body.scrollLeft;
            posY = document.body.scrollTop;
        }    var ad=document.getElementById("d1");
        ad.style.top=(posY+100)+"px";
        ad.style.left=(posX+50)+"px";
        setTimeout("scrollImg()",100);
    }
    scrollImg();
    </script>