求高手给解决上这个效果有关问题-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20396 次

求高手给解决下这个效果问题
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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>