页面滑动导航高亮实现方法及 JavaScript 代码示例

\u003cp\u003e要实现页面滑动到哪块，哪块导航栏高亮的效果，可以按照以下步骤进行：\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e1. 首先，给每个需要滚动到的块元素（例如 \u003c\u003cdiv\u003e\u003e 或 \u003c\u003csection\u003e\u003e）设置一个唯一的 id 属性，用于标识每个块。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e2. 监听窗口的滚动事件，并获取当前滚动位置。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e3. 根据滚动位置，判断当前在哪个块范围内。可以通过获取每个块元素的 offsetTop 属性来判断当前滚动位置是否在某个块的范围内。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e4. 根据当前滚动位置所在的块，更新对应导航栏的高亮状态。可以通过给高亮的导航栏项添加一个特定的 class，然后在滚动事件中判断当前块，并移除其他导航栏项的高亮 class。\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e以下是一个示例的 JavaScript 代码，实现了页面滑动到哪块哪块导航栏高亮的效果：\u003c/p\u003e\n\u003cpre\u003e\u003ccode\u003e// 获取所有需要滚动到的块元素\nconst sections = document.querySelectorAll('section');\n\n// 监听窗口滚动事件\nwindow.addEventListener('scroll', () => {\n // 获取当前滚动位置\n const scrollPosition = window.scrollY;\n\n // 遍历每个块元素\n sections.forEach((section) => {\n // 获取当前块的顶部位置和高度\n const sectionTop = section.offsetTop;\n const sectionHeight = section.clientHeight;\n\n // 判断当前滚动位置是否在当前块的范围内\n if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {\n // 添加高亮 class 到对应导航栏项\n const navItem = document.querySelector(a[href='#${section.id}']);\n navItem.classList.add('active');\n } else {\n // 移除其他导航栏项的高亮 class\n const navItem = document.querySelector(a[href='#${section.id}']);\n navItem.classList.remove('active');\n }\n });\n});\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e以上示例代码中，假设导航栏的每个项都是 \u003c\u003ca\u003e\u003c/a\u003e 标签，并且其 href 属性值与对应块元素的 id 属性值相同。在高亮导航栏项时，会给对应的 \u003c\u003ca\u003e\u003c/a\u003e 标签添加一个名为 “active” 的 class，可以根据需要自行调整或修改。\u003c/p\u003e