电子商务网站-产品详情页面 产品详情导航随着页面浮动，保持在页面顶端

$(function () {
var obj = $("#listtab123");
var navH = obj.offset().top; //获取要定位元素距离浏览器顶部的距离
//滚动条事件
$(window).scroll(function () {
var scroH = $(this).scrollTop(); //获取滚动条的滑动距离
var obj1 = $("#pls");
var navPL = obj1.offset().top;
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
if (scroH >= navH) {
if (scroH > (navPL - 100)) {
obj.css({ "position": "static", "margin": "0 auto" });
}
else {
obj.css({ "position": "fixed", "top": 0, "left": "50%", "margin-left": "-250px" }); //top值因不同主题而定
}
}
else if (scroH < navH) {
obj.css({ "position": "static", "margin": "0 auto" });
}
})
});

<div class="rightlist">
<div class="listtabs" id="listtab123">
<div class="tabsshow" id="productcontenttabs" onclick="ShowSwitchContentTab('content');">商品详情</div>
<div class="tabshide" id="productsurfacetabs" onclick="ShowSwitchContentTab('surface');">商品参数</div>
<div class="tabshide" id="productensurestabs" onclick="ShowSwitchContentTab('ensures');">购物保障</div>
<div class="tabshide" id="productcommenttabs" onclick="ShowSwitchContentTab('comment');">商品评论（<span id="commentnumbertab">0</span>）</div>
</div>
</div>