怎么让一些网页内的数据跟随浏览器动

如淘宝的宝贝详情那一栏导航，当浏览器浏览过那里的时候那个工具栏就会在浏览器上置顶，在浏览回去的时候他还能再原位，还有在淘宝搜索的时候那个搜索条件那里，也是可以跟着浏览器置顶移动的。。这种效果怎么实现呢？？？不知道的可以去淘宝看下，现在这项技术不止淘宝，还有去哪儿也有，很多地方都用到了。而且兼容很多浏览器额，求知道，求真相

解决方案 »

  1.   

    用css的position：fixed
    但是IE6没有这个属性，用JS判断
      

  2.   

    以下是非ie6的属性
    {
        width:130px;
          
        position:fixed;
        bottom:26px;
        right:50px;
        height:50px;
    }
    以下是ie6的属性
    {
        width:130px;
        right:50px;
        top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)-26));/*这里的26是距离底部的像素值*/
    }
      

  3.   


    <div class="abc"></div>
    .abc
    {
        width:360px;
        height:142px;
        opacity:1.5;/*FF*/
        z-index:1000000000; //这个是层级，设置他为最上层
        position:fixed!important;/*FF IE7*/  //这个是跟着屏幕走的，火狐，IE6以上通用
        position:absolute;/*IE6*/ //这个是让他随屏幕走的！
        _top:expression(eval(document.compatMode &&
        document.compatMode=='CSS1Compat') ?
        documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ //这是判断位置的，让他居中什么的，你可以自己修改
        document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
        left:500px;
        top:300px;
        background-color:White;
        border:3px solid #666464;
    }
      

  4.   

    试了下。。貌似没反应啊。。谷歌，IE6，IE8下都试了。。
      

  5.   


     <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
     $(document).ready(function()
      { 
        var targetTop=$("#target").offset().top;
        $(window).scroll(function(){
            var wscrollTop=$(window).scrollTop();
            if(wscrollTop>targetTop)
            {
               $("#target").animate({"top":wscrollTop+100},100);
            }
            else
            {
                $("#target").animate({"top":targetTop},100);
            }
        })
      });
    </script>
    </head><body style="height:900px; background-color:Gray">
       <div id="target" style="width:400px; height:300px; border:1px solid red;left:200px;top:100px; position:absolute">
          3213123
       </div>
       
    </body>
    </html>