如何上DIV到浏览器上边界的时候变成固定定位。

就像淘宝这样：http://item.taobao.com/item.htm?id=14600947626，上下滚动条一拉到详情那里，宝贝行情那一行就跟着页面走了。

解决方案 »

  1.   

    固定用
    position:fixed;
    top:0px;判断滚动条的位置，在两者间切换滚动用
    position:relative;
      

  2.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    .a, .b {
    height:400px; width:500px; border:1px solid red;
    }
    .b {height:600px;}
    #test {
    position:relative; top:0; left:0;
    margin:6px;
    height:20px; border:1px solid blue;
    }
    </style>
    </head>
    <body>
    <div class="a">一些文本</div>
    <div id="test">漂浮？？？</div>
    <div class="b">一些文本</div>
    <div class="b">一些文本</div>
    <script>
    function $(o){return document.getElementById(o);}
    var top = $('test').offsetTop;
    window.onscroll = function(){
    var sTop = document.body.scrollTop || document.documentElement.scrollTop;
    $('test').style.top = sTop >= top ?  sTop - top + 'px' : 0;
    }


    </script>
    </body>
    </html>
    楼主 试试