sticky侧边菜单点击滚动及滚动高亮功能失效问题求助

核心失效原因 #

• 点击事件绑定选择器不匹配：原JS绑定点击事件的目标是.forScrollLink，但实际导航a标签的class为.navigation__link，事件根本没有绑定成功，点击无响应
• 滚动高亮计算逻辑错误：原逻辑用position().top获取元素相对父容器的偏移值，和窗口滚动的文档级偏移值scrollTop做比对，数值基准不一致，联动高亮完全失效
• CSS样式缺失：sticky定位的导航栏没有设置top值，固定效果异常；导航前的蓝色箭头默认没有设置隐藏，active状态显示的逻辑不生效
• 布局冲突：父容器设置了flex-wrap: wrap，宽度不足时侧边栏和内容区会换行错位

修复后完整代码 #

HTML部分 #

原有HTML结构无需大改，仅需确保导航链接和内容区id对应即可，代码如下：

<div class="section--150 wf-section">
    <div class="container w-container w-row scroll-container">
      <div class="navigation column-95 w-col w-col-6" id="mainNav">
        <a class="navigation__link scroll-title-div active" href="#1">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">What is</h3>
        </a>
        <a class="navigation__link scroll-title-div" href="#2">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">Why you should choose?</h3>
        </a>
        <a class="navigation__link scroll-title-div" href="#3">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">Process</h3>
        </a>
      </div>
      <div class="sub-scroll-div w-row">
        <div class="page-section hero w-col w-col-6 first-scroll-content forScrollJs" id="1">
          <div class="div-block-61" id="firstScrollTagContent">
            <h2 class="scroll-h2 medium">What is</h2>
            <p class="font---16">allowing them to build a great eCommerce experience.</p>
          </div>
        </div>
        <div class="page-section w-col w-col-6 second-scroll-content forScrollJs" id="2">
          <div class="div-block-61" id="secondScrollTagContent">
            <h2 class="scroll-h2 medium">Why you should choose?</h2>
            <div class="scroll-content-div">
              <h3 class="font-25 medium">Responsive</h3>
              <p class="font---16">allowing them to build a great eCommerce experience.</p>
            </div>
            </div>
        </div>
        <div class="page-section w-col w-col-6 third-scroll-content forScrollJs" id="3">
          <div class="div-block-61" id="thirdScrollTagContent">
            <h2 class="scroll-h2 medium">Process</h2>
            <div class="scroll-content-div">
              <h3 class="font-25 medium">Understanding</h3>
              <p class="font---16">By discussing clients’ business goals and understanding the user needs and the
                problematic areas we’ll build strategies that serve both with No-code.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS部分 #

修正sticky定位、默认箭头隐藏、布局冲突问题：

/* scrolling plug-in */
.scroll-container {
  display: flex;
  flex-direction: row;
  /* 去掉wrap避免内容换行错位 */
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.page-section {
  min-height: 80vh; /* 给每个区块设置最小高度，保证滚动触发空间 */
  width: 100%;
  margin-bottom: 5%;
}
.sub-scroll-div {
  width: 50%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
}
.first-scroll-content {
  margin-top: 0px;
}
.navigation {
  display: block;
  position: sticky;
  width: 50%;
  /* sticky必须设置top值才会生效 */
  top: 80px;
  margin-bottom: auto;
  margin-right: auto;
  align-self: flex-start;
}
.navigation__link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: black;
  text-decoration: none;
  font-weight: 400;
  margin-bottom: 24px;
}
.navigation__link:hover {
  color: #3f71ff;
}
.navigation__link.active {
  color: #3f71ff;
}
/* 箭头默认隐藏 */
.active-blue-arrow {
  display: none;
  opacity: 0;
  width: 16px;
  height: 16px;
}
.navigation__link.active .active-blue-arrow {
  display: block;
  opacity: 1;
}

JS部分 #

修正选择器、滚动计算逻辑：

$(document).ready(function() {
  // 修正选择器，匹配实际的导航链接class
  $('.navigation__link').on('click', function(e) {
    e.preventDefault();
    var target = $(this).attr("href");
    var targetOffset = $(target).offset().top - 60; // 减去顶部预留偏移，避免内容被遮挡
    $('html, body').stop().animate({
      scrollTop: targetOffset
    }, 500, function() {
      history.pushState(null, null, target); // 无刷新更新url hash，避免页面跳动
    });
    return false;
  });

  // 滚动联动高亮
  $(window).on('scroll', function() {
    var scrollDistance = $(window).scrollTop() + 100; // 加偏移量，提前触发高亮
    $('.page-section').each(function(i) {
      // 用offset().top获取元素相对于文档顶部的距离，和scrollDistance基准一致
      if ($(this).offset().top <= scrollDistance) {
        $('.navigation a.active').removeClass('active');
        $('.navigation a').eq(i).addClass('active');
      }
    });
  }).trigger('scroll'); // 初始化触发一次，默认高亮第一个菜单
});

效果说明 #

• 左侧导航栏会在页面滚动时固定在侧边距离顶部80px的位置
• 点击左侧菜单项会平滑滚动到对应右侧内容区块，同时更新URL哈希值不会触发页面跳动
• 页面滚动时，对应内容区的菜单项会自动高亮，显示蓝色箭头和蓝色文字
• 每个内容区块设置了最小高度，保证滚动触发的空间足够，不会出现高亮跳变的问题

内容的提问来源于stack exchange，提问作者Alap Joshi