Elementor左侧固定滚动激活导航实现方案咨询

适配的插件推荐 #

• Elementor Pro：自带的导航菜单小工具原生支持锚点滚动高亮，只要正确关联锚点和菜单，开启粘性固定后就能正常触发高亮效果，是最省心的方案。
• Sticky Menu & Sticky Header：免费插件，可快速设置菜单左侧固定，同时自带锚点滚动高亮功能，无需复杂配置，和Elementor菜单兼容性好。
• WP Scroll Anchor：专注处理锚点滚动的轻量插件，给Elementor菜单的链接绑定对应区块的锚点ID后，插件会自动监听滚动并高亮当前菜单项。

手动实现分步教程（无需额外插件） #

1. 给页面区块设置锚点ID #

打开Elementor编辑器，找到需要和导航关联的每个页面章节区块（比如章节标题）：

• 选中区块，切换到「高级」选项卡
• 在「CSS ID」栏输入唯一标识，比如section-about、section-projects，每个区块的ID不能重复

2. 配置Elementor导航菜单 #

• 添加或编辑Elementor的「导航菜单」小工具，在菜单中添加自定义链接：
  • 链接地址填写#section-about（对应刚才设置的锚点ID）
  • 链接文本设为对应的章节名称
• 开启菜单的粘性固定：在「高级」-「定位」里选择「固定」，调整左侧、顶部的数值，让菜单固定在左侧合适位置

3. 添加自定义代码实现滚动高亮 #

步骤1：添加自定义CSS

进入Elementor的「站点设置」-「自定义CSS」，粘贴以下代码（可修改颜色和样式匹配你的网站）：

/* 高亮当前菜单项的样式 */
.elementor-menu-item.current-menu-item {
    color: #ff4040; /* 替换成你需要的高亮颜色 */
    font-weight: 700;
    border-left: 3px solid #ff4040; /* 可选：添加左侧边框强化高亮 */
}

步骤2：添加自定义JS

通过Elementor的「自定义代码」功能（或主题的自定义JS选项）添加以下代码，用于监听滚动并切换高亮类：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带锚点ID的区块和菜单项
    const sections = document.querySelectorAll('[id^="section-"]');
    const menuItems = document.querySelectorAll('.elementor-menu-item');

    window.addEventListener('scroll', function() {
        let currentSectionId = '';
        // 遍历区块，判断当前滚动位置对应的区块
        sections.forEach(section => {
            const sectionTop = section.offsetTop - 200; // 偏移量，可根据需求调整
            const sectionHeight = section.clientHeight;
            if (window.pageYOffset >= sectionTop && window.pageYOffset < sectionTop + sectionHeight) {
                currentSectionId = section.getAttribute('id');
            }
        });

        // 更新菜单项的高亮状态
        menuItems.forEach(item => {
            item.classList.remove('current-menu-item');
            if (item.getAttribute('href') === `#${currentSectionId}`) {
                item.classList.add('current-menu-item');
            }
        });
    });
});

4. 测试验证 #

预览页面，滚动查看对应菜单项是否自动高亮，点击菜单链接是否能跳转到对应区块，若高亮位置不准，可调整JS里的section.offsetTop - 200中的偏移数值。

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