锚点导航实时高亮需用intersectionobserver监听目标元素可见性，设rootmargin补偿fixed头部、threshold为[0.1,0.5]防抖动，hashchange仅用于清理active状态，不可替代滚动位置判断。
锚点滚动时页面不显示当前位置，本质是浏览器没提供原生视觉反馈——得自己用 IntersectionObserver 或滚动监听来判断哪个锚点区域进入了视口，并高亮对应导航项。
怎么让导航栏实时高亮当前滚动到的锚点
核心不是监听 scroll 事件算 offsetTop（容易卡顿、不准），而是用 IntersectionObserver 观察所有锚点目标元素的可见性变化。它天然支持阈值控制，且性能远优于手动计算。
- 给每个锚点目标元素（比如
<section id="about"></section>）加一个统一 class，例如js-anchor-target - 初始化
IntersectionObserver，threshold设为[0.1, 0.5]：既能在内容刚露头（10%）时触发，也能在居中（50%）时再确认一次，避免临界抖动 - 回调里只处理进入（
isIntersecting === true）且intersectionRatio >= 0.1的项，取最后一个满足条件的作为“当前”锚点 - 用该锚点的
id去匹配导航中href="#about"的<a></a>，加 class 如active即可
为什么用 scrollIntoView 滚动后高亮常错位
因为 scrollIntoView({ block: 'start' }) 会把目标顶部对齐 viewport 顶部，但若页面有固定头部（position: fixed），实际内容会被遮挡——此时目标元素的 getBoundingClientRect().top 是负值，IntersectionObserver 可能还没触发，或触发时 intersectionRatio 过低被忽略。
- 必须给
IntersectionObserver的rootMargin补上头部高度，例如"-80px 0px 0px 0px"（假设 header 高 80px） - 不要依赖
scrollIntoView后立刻查状态；等一帧（requestAnimationFrame）再触发观察器检查，或直接让 observer 持续运行 - 如果用 CSS
scroll-margin-top替代 JS 调整，需注意 Safari 15.4+ 才稳定支持，旧版仍要靠rootMargin
hashchange 事件不能替代滚动监听
用户点导航链接触发 hash 变化时，hashchange 确实能捕获，但它只管 URL，不管滚动是否完成、是否真到达目标位置。比如用户快速连点两个锚点，中间滚动被中断，hashchange 已发，但页面停在半路，高亮就错了。
-
hashchange适合做“跳转前清理”，比如移除所有active；但“设 active”必须由滚动过程中的真实位置决定 - 单页应用（SPA）里，路由切换也可能改 hash，此时更不能仅靠
hashchange判断视觉锚点 - 真正可靠的方式只有两种：持续运行的
IntersectionObserver，或节流后的scroll+document.elementFromPoint回退方案（不推荐）
最易被忽略的是 rootMargin 和 threshold 的配合——设了 rootMargin 却没调 threshold，可能导致顶部锚点永远无法触发；而过度依赖 scroll 事件，在 iOS Safari 上还可能因弹性滚动延迟触发，造成高亮滞后半秒以上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
