共计 679 个字符，预计需要花费 2 分钟才能阅读完成。
如题，实现下图的导航成果。
计划 1
1、实现滚动时导航栏 active 我的项目变动
监听 scroll 事件，通过每个模块的高度、scroll 的间隔，计算出以后 active 的模块，把导航栏对应的题目置为 active 的状态。这种计划不应用锚点，不须要治理路由状态。
2、点击导航栏，页面滚动到导航地位。（导航栏 active 状态追随变动，无需额定实现）
点击导航栏后，计算以后选中的元素到页面顶部的间隔。通过管制滚动间隔，将制订的导航栏显示在窗口顶端。
要点：
1、scroll 事件最好加上防抖，加重性能压力。
2、对高度固定（每个模块的高度都固定）的页面更容易实现。
3、实现的时候要留神向上滚动的时候，滚动数值是一个负值。
4、这个计划不须要管制路由，也不须要对页面的元素打上锚点。
5、初始化高度遍历，如果有异步加载的区域，肯定要在异步加载后再遍历获取高度。
计划 2
H5 个性 IntersectionObserver
创立 IntersectionObserver 实例（容器）
调用实例的 observe()办法，监听每一个须要导航的元素。
1、实现滚动时导航栏 active 我的项目变动，同时变更路由
在容器察看到外部元素出界的时候，变更导航栏的 active 题目，同时变更路由状态。
2、点击导航栏，页面滚动到导航地位。
通过锚点实现。
要点：
1、解决被察看元素从上部下部出界的状况。
2、解决一个容器内有多个被察看元素的状况下，导航栏 active 的逻辑。
看到浏览器 location 里有 #，大概率是用了 IntersectionObserver。要是应用遍历每个模块高度的状况下还用锚点做跳转，那属实有点蠢笨。
正文完
