電子商務網站-產品詳情頁面 產品詳情導航隨着頁面浮動，保持在頁面頂端

$(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>