如何修改WordPress中浮动链接或图标的活跃项颜色

1. 给当前锚点项添加活跃类（JavaScript） #

由于你使用的插件未自带锚点高亮功能，需要通过监听滚动事件手动标记当前活跃的菜单项。在WordPress后台「外观」→「自定义」→「自定义HTML/JS」（或借助Code Snippets插件）添加以下代码：

document.addEventListener('DOMContentLoaded', () => {
  const menuLinks = document.querySelectorAll('.float-menu a[href^="#"]');
  const sections = document.querySelectorAll('section[id]');

  window.addEventListener('scroll', () => {
    let currentSection = '';
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      // 偏移量根据浮动菜单高度调整，避免菜单遮挡内容时提前触发高亮
      if (window.pageYOffset >= sectionTop - 100) {
        currentSection = section.id;
      }
    });

    menuLinks.forEach(link => {
      link.classList.remove('active-anchor');
      if (link.getAttribute('href') === `#${currentSection}`) {
        link.classList.add('active-anchor');
      }
    });
  });
});

提示：如果你的浮动菜单容器类不是.float-menu，用浏览器审查工具找到实际类名替换即可。

2. 编写高亮样式（CSS） #

在WordPress后台「外观」→「自定义」→「额外CSS」中添加以下样式，可根据需求修改属性：

/* 活跃锚点项高亮样式 */
.active-anchor {
  background-color: #2c3e50; /* 替换为你需要的背景色 */
  color: #ffffff !important; /* 文字颜色 */
  font-size: 1.1em; /* 放大文字 */
  border-radius: 4px; /* 圆角效果，可选 */
}

/* 若菜单项包含图标，单独修改图标颜色 */
.active-anchor .menu-icon {
  color: #ffffff !important;
}

排查要点 #

• 确认锚点链接的href属性值与目标元素的id完全匹配（大小写敏感）。
• 滚动页面时用浏览器审查工具查看菜单项是否成功添加active-anchor类，未添加则检查JavaScript中的选择器是否正确。
• 可调整sectionTop - 100的数值，比如菜单高度为60px时，可改为sectionTop - 70，确保内容进入视野后再触发高亮。

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