求高手给解决上这个效果有关问题

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

------解决方案--------------------
完整的代码

HTML code

<!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>

求高手给解决上这个效果有关问题

相关推荐