淘宝的宝贝详情中，商品详情的自动检测悬浮框是怎么弄的？

C#.JS.CSS，不是淘宝店家，只是想在自己网站实现该效果
如上图三张图片所示，本来标识红框的地方是固定的，当根据滚动条来检测是否需要悬浮，不知道这个功能的思路是啥，又是怎么个实现法，本来想过根据滚动条来检测的，但是结果似乎不如意，滚动条检测高度只能是固定的，而宝贝详情的界面高度是不固定的，它是怎么做到的呢？淘宝悬浮宝贝详情特效div

解决方案 »

  1.   

    很简单的道理，在页面滚动的时候，计算滚动了的高度，在滚动到这里的时候，把这个容器的position改成fixed，设置top为0。再滚回去的时候，设置回来就是。
      

  2.   


    <!DOCTYPE HTML><html lang="en-US"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>    <style type="text/css">    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}    .header{height:150px;}    #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}    a{display:inline-block;margin:0 10px;*display:inline;;color:white;}    </style></head><body>    <div class="wrapper">        <div class="header"></div>        <div id="nav">            <a href="#">11111</a>            <a href="#">22222</a>            <a href="#">33333</a>            <a href="#">44444</a>            <a href="#">55555</a>        </div>    </div>    <script type="text/javascript">    function menuFixed(id){    var obj = document.getElementById(id);    var _getHeight = obj.offsetTop;         window.onscroll = function(){        changePos(id,_getHeight);    }}function changePos(id,height){    var obj = document.getElementById(id);    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    if(scrollTop < height){        obj.style.position = 'static';    }else{        obj.style.position = 'absolute';        obj.style.top = scrollTop + 'px';    }}window.onload = function(){    menuFixed('nav');}    </script></body></html> 
      

  3.   

    <html lang="en-US"><head>    <meta charset="UTF-8">    <title></title>    <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>    <style type="text/css">    .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}    .header{height:150px;}    #nav{padding:10px;position:relative;top:0;background:black;width:1000px;}    a{display:inline-block;margin:0 10px;*display:inline;;color:white;}    </style></head><body>    <div class="wrapper">        <div class="header"></div>        <div id="nav">            <a href="#">11111</a>            <a href="#">22222</a>            <a href="#">33333</a>            <a href="#">44444</a>            <a href="#">55555</a>        </div>    </div>    <script type="text/javascript">    function menuFixed(id){    var obj = document.getElementById(id);    var _getHeight = obj.offsetTop;         window.onscroll = function(){        changePos(id,_getHeight);    }}function changePos(id,height){    var obj = document.getElementById(id);    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    if(scrollTop < height){        obj.style.position = 'static';    }else{        obj.style.position = 'absolute';        obj.style.top = scrollTop + 'px';    }}window.onload = function(){    menuFixed('nav');}    </script></body></html>