Vue 导航栏滚动定位功能实现，导航栏-滚动页面；滚动页面-导航栏；

概述

本文档介绍了如何在 Vue.js 项目中实现一个具有滚动定位功能的导航栏组件。该组件可以根据页面滚动位置高亮显示对应的导航菜单项，并且点击菜单项时，页面可以平滑滚动到相应的内容区域。

功能实现步骤：

步骤 1：编写导航栏组件
 

创建一个 Navbar 组件，该组件包含导航菜单和内容区域。

在模板中，使用 a-menu、a-sub-menu 和 a-menu-item 组件来创建导航菜单。使用 a-card 组件包裹内容区域。

步骤 2：定义数据和事件处理方法

在 Navbar 组件的 data 函数中定义以下数据：

• rootSubmenuKeys：保存根级子菜单的 keys。
• activeMenu：保存当前选中菜单的 key。

在 methods 中定义以下事件处理方法：

• handleScroll：监听滚动事件的方法，根据滚动位置计算当前应该高亮显示的导航菜单项。
• scrollToSection：点击导航菜单项时，滚动到相应的内容区域。

步骤 3：监听滚动事件

在 Navbar 组件的 mounted 钩子函数中，使用 window.addEventListener 方法监听滚动事件，并在事件触发时调用 handleScroll 方法。