如何通过jQuery实现滚动到对应内容区块时自动切换头部菜单高亮样式

核心修改说明 #

你需要调整JS逻辑的两个核心问题：

1. 滚动事件绑定错误：你当前监听的是window的滚动事件，但实际可滚动容器是.content元素，导致滚动时事件无法触发
2. 缺少滚动位置判定逻辑：需要在滚动时实时对比当前滚动距离和各区块的顶部位置，自动切换对应导航的高亮状态

修改后的完整JS代码 #

无需调整原有HTML和CSS代码，直接替换原有JS逻辑即可：

$(document).ready(function(){
  // 统一处理导航高亮切换
  function switchActive(navClass) {
    $('.item').removeClass('active');
    $(navClass).addClass('active');
  }

  // 绑定滚动容器的滚动事件
  $('.content').scroll(function(){
    const scrollDistance = $(this).scrollTop();
    // 计算两个区块距离滚动容器顶部的位置，减去20px和点击跳转的偏移量保持一致
    const aboutSectionTop = $('#js-box1').offset().top - $('.content').offset().top - 20;
    const serviceSectionTop = $('#js-box2').offset().top - $('.content').offset().top - 20;

    // 根据滚动位置切换高亮
    if (scrollDistance >= serviceSectionTop) {
      switchActive('.js-service');
    } else {
      switchActive('.js-about');
    }
  });

  // 点击导航滚动到对应区块逻辑
  $('.item').click(function(e){
    e.preventDefault();
    const target = $(this).attr('href');
    const targetPosition = $(target).offset().top - $('.content').offset().top - 20;
    $('.content').animate({scrollTop: targetPosition}, 1000, () => {
      // 滚动动画结束后主动触发滚动判定，保证状态正确
      $('.content').trigger('scroll');
    });
  });

  // 页面加载后主动触发一次判定，设置初始高亮状态
  $('.content').trigger('scroll');
});

修改后即可实现滚动到对应区块自动切换导航高亮、点击导航正常跳转并高亮的需求。

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