读书人

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

发布时间: 2012-09-19 13:43:53 作者: rapoo

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

读书人网 >JavaScript

热点推荐