求高手给解决下这个效果问题

http://mall.10010.com/goodsdetail/111206084915.html
商品信息   手机参数   套餐介绍。。
这一栏  鼠标往下移动 他跟着移动 当到达浏览器顶端就固定了 不移动了
这个效果是如何实现的  求代码！

解决方案 »

  1.   

    它是靠这个css和脚本实现
    <style>
    .sticky {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        margin-top: -1px;
        position: fixed;
        top: 0;
        width: 790px;
        z-index: 90000;
    }
    </style>
    <script>
    function autoTab() {
        var goodsTab = $('.goodsDetals').offset().top;
        if ($(window).scrollTop() >= goodsTab) {
            $('.goodsTab').addClass("sticky");
            return false;
        }
        else {
            $('.goodsTab').removeClass("sticky");
            return true;
        }
    }
    </script>原理就是，判断这个块内容的高度超过屏幕区域就是采用position: fixed;定位就可以了
      

  2.   

    它是靠这个css和脚本实现
    <style>
    .sticky {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        margin-top: -1px;
        position: fixed;
        top: 0;
        width: 790px;
        z-index: 90000;
    }
    </style>
    <script>
    function autoTab() {
        var goodsTab = $('.goodsDetals').offset().top;
        if ($(window).scrollTop() >= goodsTab) {
            $('.goodsTab').addClass("sticky");
            return false;
        }
        else {
            $('.goodsTab').removeClass("sticky");
            return true;
        }
    }
    </script>原理就是，判断这个块内容的高度超过屏幕区域就是采用position: fixed;定位就可以了
      

  3.   

    完整的代码
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5 {margin:0;padding:0;}
    ul{list-style: none outside none;}
    .goodsTab ul {border-bottom:2px solid #ed6d00;height:23px;background:#fff;width:600px;}
    .goodsTab ul li {float:left;width:100px;height:23px;margin-right:5px;text-align:center;border:2px solid green;}
    .goodsTab ul li h2 {line-height:23px;font-weight:bold;cursor:pointer;}
    .sticky {position: fixed;top: 0;z-index: 90000;
    }
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
    $(window).scroll(function() {autoTab();})function autoTab() {
        var goodsTab = $('.goodsDetals').offset().top;
        if ($(window).scrollTop() >= goodsTab) {
            $('.goodsTab').addClass("sticky");
            return false;
        }
        else {
            $('.goodsTab').removeClass("sticky");
            return true;
        }
    }
    </script>
    </head>
    <body>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><div class="goodsDetals">
    <div class="goodsTab">
    <ul>
    <li>AAAA</li>
    <li>BBBB</li>
    </ul>
    </div>
    </div><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    <p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p><p>其他内容</p>
    </body>
    </html>