JS页面下滑固定顶部

<div class="header hidden-xs hidden-sm scroll">
    <div class="header-flex flex a-center j-space-between"></div>
</div>

<div class="page-banner">
    <img src="{{ p.img | img_format }}" alt="{{ p.cname }}">
</div>

<div class="about-nav">
    <ul class="flex j-center a-center wrap">
        <li><a href="#a01">公司简介</a></li>
        <li><a href="#a02">资质证书</a></li>
        <li><a href="#a03">生产现场</a></li>
        <li><a href="#a04">企业文化</a></li>
    </ul>
</div>

<script>
    $(document).ready(function() {
        $(window).scroll(function() {
            // 获取窗口当前滚动条的位置
            var scrollPosition = $(window).scrollTop(); 
            // 获取 header 高度（包括外边距）
            var headerHeightWithMargin = $('.header').outerHeight(true);
            // 获取 banner 高度（包括外边距）
            var bannerHeightWithMargin = $('.page-banner').outerHeight(true); 

            // 设置固定定位样式
            var fixedStyles = {
                'position': 'fixed',
                'left': '0px',
                'width': '100%',
                'z-index': '1000',
                'background':'#fff',
                'top': headerHeightWithMargin + 'px' // 将距离上部文档的距离应用到 top 样式
            };

            // 如果滚动位置大于 banner + header高度
            if (scrollPosition >= bannerHeightWithMargin - headerHeightWithMargin) {
                // 应用固定定位样式
                $('.about-nav').css(fixedStyles);
            } else {
                // 否则应用绝对定位样式
                $('.about-nav').css({
                    'position': 'relative',
                    'left': '0px',
                    'top': '0px',
                });
            }
        });
    });

</script>