滚动监听粘性菜单锚点跳转不高亮、滚动无变色问题求助

一、修复菜单项高亮问题 #

你的代码缺少点击和滚动时菜单active类的切换逻辑，按以下步骤修改即可：

1. 点击菜单时同步高亮状态
   在菜单点击事件中添加类切换代码，确保点击的菜单项被标记为active，同时清除其他项的该类：

document.querySelectorAll('.menu a').forEach(link => {
  link.addEventListener('click', function() {
    // 移除所有菜单项的active类
    document.querySelectorAll('.menu a.active').forEach(item => item.classList.remove('active'));
    // 给当前点击项添加active类
    this.classList.add('active');
  });
});

2. 滚动时自动高亮对应菜单项
   添加滚动监听函数，检测当前视口中的锚点元素，同步对应菜单项的高亮状态：

function updateActiveMenu() {
  const sections = document.querySelectorAll('section[id]');
  const scrollPos = window.scrollY + 100; // 偏移量可根据需求调整

  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.offsetHeight;
    const sectionId = section.getAttribute('id');

    if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
      document.querySelectorAll('.menu a.active').forEach(item => item.classList.remove('active'));
      document.querySelector(`.menu a[href="#${sectionId}"]`).classList.add('active');
    }
  });
}

// 绑定滚动与页面加载事件
window.addEventListener('scroll', updateActiveMenu);
window.addEventListener('load', updateActiveMenu);

二、修复粘性菜单滚动变色问题 #

需监听滚动距离，当滚动超过菜单初始位置时切换样式：

1. 添加CSS变色样式
   预设菜单滚动后的样式，示例如下：

.sticky-menu.sticky-active {
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  /* 可自定义其他样式变化 */
}

2. 添加滚动监听逻辑
   获取菜单初始位置，滚动时判断距离并切换类：

const stickyMenu = document.querySelector('.sticky-menu');
const stickyOffset = stickyMenu.offsetTop;

function toggleStickyStyle() {
  if (window.scrollY >= stickyOffset) {
    stickyMenu.classList.add('sticky-active');
  } else {
    stickyMenu.classList.remove('sticky-active');
  }
}

window.addEventListener('scroll', toggleStickyStyle);
window.addEventListener('load', toggleStickyStyle);

将以上代码整合到原有JS中，同时确保CSS里配置了.menu a.active的高亮样式（比如文字颜色、下划线等），即可实现点击/滚动时菜单高亮、滚动时粘性菜单变色的效果。

内容的提问来源于stack exchange，提问作者Świeża Strona