页面随鼠标滚动，侧边导航栏固定位置，链接跳转到页面指定位置

上一篇文章中详细介绍了a标签锚点的使用，实现链接跳转到指定位置功能，重点解决了当网页header固定fixed的情况，跳转位置有所偏移的问题，需要的同学可以查看https://blog.csdn.net/liuminyi1987/article/details/105787187

本篇介绍如下左侧导航栏固定，且每个链接是a锚点。

HTML代码：

<div class="mprobedx-left reagent-left" id="scrolldiv" >
        <ul>
            <li>
            <a id="link" href="#part0">产品介绍</a>
            </li>
            <li>
                <a id="link1" href="#part1">产品优势</a>
            </li>
            <li>
                <a id="link2" href="#part2">代谢组学试剂盒</a>
            </li>
            <li>
                <a id="link3" href="#part3">蛋白组学试剂盒</a>
            </li>
            <li>
                <a id="link4" href="#part4">脂质组学试剂盒</a>
            </li>
        </ul>
    </div>
    <div class="mprobedx-right">  
            <a id="part0" class="target-fix"></a> 
            <div class="max1440 mprobedx_cn clearfix">               
                <div>
                    <h5>产品介绍</h5>
                    <div>用户可通过定期将实验结果在大数据平台与大人群健康基线进行对比，实现全息全程的健康管理。多组学检测具有广泛的科研和临床应用，如：心血管系统疾病的预测和检测, 肿瘤的预测和检测, 癌症药物和治疗靶点筛查，神经精神性疾病的预测和检测, 胎儿遗传缺陷的早期诊断, 糖尿病等代谢疾病的预测和诊断, 疾病分期/分型，药效评价, 手术方案和预后评价, 药物个体化治疗, 中医辨证和分型, 饮食或肠道菌落结构干预治疗等。</div>              
                </div>
            </div>         
            <a id="part1" class="target-fix"></a> 
            <div  class="max1440 mprobedx_cn clearfix  " >             
                <div>
                    <h5>产品优势 —— 哪种试剂盒产品适合我?</h5>
                    <div class="reagent-right-flex">
                        <div class="advantage">
                            <p><img src="../../../../../Public/Home/images/advantage1.png" style="width: 81px;"></p>
                            <p>发表文献</p>
                        </div>
                        <div class="advantage">
                            <p><img src="../../../../../Public/Home/images/advantage2.png" alt=""></p>
                            <p>快速便捷</p>
                        </div>
                        <div class="advantage">
                            <p><img src="../../../../../Public/Home/images/advantage3.png" alt=""></p>
                            <p>灵敏度高</p>
                        </div>
                        <div class="advantage">
                            <p><img src="../../../../../Public/Home/images/advantage4.png" alt=""></p>
                            <p>临床诊断</p>
                        </div>
                        <div class="advantage">
                            <p><img src="../../../../../Public/Home/images/advantage5.png" alt=""></p>
                            <p>实惠经济</p>
                        </div>
                        
                    </div>
                </div>
            </div>
</div>

 

JS代码：

 $(function(){
            $("html, body").animate({scrollTop: 0}, 500);//打开页面默认跳转到顶部
            //添加滚动悬浮监听
            window.addEventListener('scroll', handleScroll);
        })
        function handleScroll () {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var offsetTop = document.querySelector('#scrolldiv').offsetTop;
            if (scrollTop > 400) {
                $("#scrolldiv").css("position","fixed");
                $("#scrolldiv").addClass("scroll-fixed");
            }
            if(scrollTop<400){ //不遮挡原滚动DOM上面的DOM
                $("#scrolldiv").css("position","relative");
                $("#scrolldiv").removeClass("scroll-fixed");
            }
        }

CSS：

.scroll-fixed{
    position: fixed;
    top: 134px;
}

有一种情况是导航栏比较长，当滚动到页面底部的时候，会遮挡底部，如下所示：

则在js代码中需添加当滚动到底部时，移除fix样式。参考代码如下：

 handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var offsetTop = document.querySelector('#scrolldiv').offsetTop;
                if (scrollTop > offsetTop) {
                    this.calendarscroll = true;
                    this.scrollbottom = false;
                    if(scrollTop > 1350) //滚动到底时，不继续滚动遮挡合作机构，固定位置
                    {
                        this.scrollbottom = true;
                    }
                    else {
                        this.scrollbottom = false;
                    }
                }
                if(scrollTop<1350)
                {
                    this.scrollbottom = false;
                }
                if(scrollTop<450){ //不遮挡原日历上面的DOM
                    this.calendarscroll = false;
                    this.scrollbottom = false;
                }
            },

HTML代码参考如下：

  <!--滚动区域-->
 <div id="scrolldiv" :class="{fixed:calendarscroll,scrollabsolute:scrollbottom}">
</div>