如何实现导航链接随滚动匹配自身hover背景色高亮

核心思路 #

• 遍历导航链接的类列表，精准提取带hover:bg-前缀的类
• 将提取到的类移除hover:前缀，得到对应的普通背景类
• 滚动监听时，先清除所有链接的激活背景类，再给当前对应区块的链接添加转换后的背景类

实现代码 #

// 获取所有导航链接
const navLinks = document.querySelectorAll('nav a');

function setActiveNavLink() {
  // 清除所有链接的激活背景类
  navLinks.forEach(link => {
    const activeBgClass = Array.from(link.classList).find(cls => 
      cls.startsWith('bg-') && !cls.startsWith('hover:bg-')
    );
    if (activeBgClass) link.classList.remove(activeBgClass);
  });

  // 定位当前处于视口的区块
  let currentSectionId = '';
  const sections = document.querySelectorAll('section');
  sections.forEach(section => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    // 这里的100是偏移值，可根据导航栏高度调整
    if (window.scrollY >= sectionTop - 100) {
      currentSectionId = section.id;
    }
  });

  // 给对应链接设置激活背景类
  navLinks.forEach(link => {
    if (link.getAttribute('href') === `#${currentSectionId}` && currentSectionId) {
      // 提取hover背景类
      const hoverBgClass = Array.from(link.classList).find(cls => cls.includes('hover:bg-'));
      if (hoverBgClass) {
        const activeBgClass = hoverBgClass.replace('hover:', '');
        link.classList.add(activeBgClass);
      }
    }
  });
}

// 绑定滚动监听
window.addEventListener('scroll', setActiveNavLink);
// 页面加载时初始化状态
window.addEventListener('load', setActiveNavLink);

关键说明 #

• 不要用字符串匹配className的方式查找类，而是通过classList转换成数组后查找，避免类名重叠导致的错误（比如同时存在hover:bg-red-300和bg-red-300不会混淆）
• 清除激活类时要过滤掉hover:bg-开头的类，防止误删原本的hover样式
• 滚动偏移值可以根据你的导航栏高度调整，确保切换时机准确

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