电子商务网站-产品详情页面产品详情导航随着页面浮动，保持在页面顶端_前端商品详情页顶部导航点击商品滑动到页面商品区域,同时滑动页面,在显示区域的-优快云博客

本文介绍了一种实现商品详情页中Tab栏在滚动到特定位置时变为固定位置的效果。通过JavaScript监听滚动事件并计算Tab栏的位置来完成这一功能。

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