用jquery实现页面滚动加点击事件对应的导航栏高亮

实现效果如图

我的需求是 当页面滚动的时候 让导航栏浮动定位 同时让下面内容区滚动的时候对应的导航栏标题高亮 同时点击导航栏标题的时候 下面的内容也滚动到对应区域 实现思路 主要是使用到 data-target 自定义属性
下面是代码

     <div class="mus_container zxv_st" id="sec1">
          <div class="title_tabs title_tabs3">
              <span class="spt active_zxb" data-target="sec1">目录<i class="active_i" style="display: none"></i></span>
              <span class="spt" data-target="sec2">视频简介<i style="display: none"></i></span>
              <span class="spt" data-target="sec3">评论(4)<i style="display: none"></i></span>
              <span class="spt" data-target="sec4">下载<i style="display: none"></i></span>
          </div>
          <div>这是第一个目录内容下的模块</div>
      </div>
     <div class="zxb_container zxv_st" id="sec2">
          <div class="zxb_content">
              <p class="fl_title">视频简介</p>
              <div class="detail_zxb">
                  这是第二个视频简介下的模块
              </div>
          </div>
      </div>
     <div class="zxb_container zxv_st" id="sec3">
         <div class="zxb_content">
             <p class="fl_title">评论(4)</p>
             <div class="pji_nei">
                 这是第三个评论内容下的模块 为了使大家看的简洁明了  我把内容删了 大家只需要知道这个模块对应的是评论的内容就行
             </div>

         </div>
     </div>
     <div class="zxb_container zxv_st" id="sec4">
          <div class="zxb_content">
              <!--下载-->
              <p class="fl_title">下载</p>
              <div class="pl_no" style="padding: 1rem 0 3rem">
                  <img class="computer_pic" src="img/com_icon.png" alt="">
                  <p class="nothing_mx">手机端暂时不支持下载</br>请您去电脑端下载！</p>
              </div>
          </div>
      </div>

//滑动的时候 给标题导航栏一个吸顶的样式
.sticky23 {
    position: fixed;
    top: 3.7rem;
    z-index: 99;
    width: 6.9rem;
    background-color: #FFFFFF;
    padding: 0.2rem 0;
}

 $(document).ready(function () {
        var titleCont=$(".title_tabs");//导航栏
        var totalContainer=$(".zxv_st");//获取到要计算的目录 简介 评论和下载的这四个模块
        var navItems = $('.spt');//获取到导航栏的每一个标题
        var navHeight = titleCont.outerHeight();//获取导航栏的高度
        var titleDistance=titleCont.offset().top;//导航栏的上边框相对于html上边界的偏移量。
 
        $(window).scroll(function () {
            var scrollDistance = $(window).scrollTop();//计算页面滚动的距离
         
            if (scrollDistance >= titleDistance-290) { //如果页面滚动的距离大于导航栏的偏移量的时候 就让它吸顶 我这里减290 是因为我上面的视频模块需求也是吸顶的 
                titleCont.addClass("sticky23");
            } else {
                titleCont.removeClass("sticky23");
            }
            //循环上面拿到的四个模块
            totalContainer.each(function () {
                var elementPosition=$(this).offset().top;
               // console.log(elementPosition,'elementPosition');
                var threshold=300;//这里设置了一个初始值 大家自定义
                // 如果当前标题元素在阈值范围内，添加高亮样式，否则移除高亮样式
                if (scrollDistance >= elementPosition - threshold && scrollDistance < elementPosition + $(this).outerHeight() + threshold) {
                    var currentSectionId = this.id;
                    // 移除所有 item 的高亮样式
                    navItems.removeClass('active_zxb');
                    navItems.children("i").removeClass("active_i")
                    // 找到对应的导航栏 item，添加高亮样式
                    $('.spt[data-target="' + currentSectionId + '"]').addClass('active_zxb');
                    $('.spt[data-target="' + currentSectionId + '"]').children("i").addClass("active_i")

                } else {
                }

            })
        })
// 点击导航栏标题滚动到对应栏目
        $('.title_tabs>span').click(function () {
            var targetId = $(this).data('target');
            var targetSection = $('#' + targetId);
          //  console.log(targetSection,'targetSection');
            $('.title_tabs>span').removeClass("active_zxb");
            $(".title_tabs>span").children("i").removeClass("active_i")
            $(this).addClass("active_zxb")
            $(this).children("i").addClass("active_i")
            $('html, body').animate({
                scrollTop: targetSection.offset().top - navHeight-120
            }, 500);

            return false; // 防止默认行为
        });
    })

没有说的是 最原始的需求是最上面的视频也需要吸顶 然后继续滚动导航栏也需要浮动定位 在这篇博文里 我把视频模块吸顶的实现给删除了
如果大家在食用的过程中发现这瓜不保熟 那就检查下你们的页面样式 是否有
body,html{
overflow-x:hidden;
}
或者其他overflow的样式 因为这个样式导致监听不到正确的页面滚动高度 有问题首先打印下$(window).scrollTop()是否有值 如果没有 这里需要你给它改成 overflow: visible；

~~至此完结