如题，实现下图导航效果。解决方案11、滚动时监听导航栏activeitem变化的scroll事件，通过每个模块的高度和滚动距离计算出当前活跃的模块，将导航栏对应的title设置为active状态。该方案不使用锚点，不需要管理路由状态。2、点击导航栏，页面会滚动到导航位置。（导航栏的active状态会随之变化，不需要额外实现。）点击导航栏后，计算当前选中的元素到页面顶部的距离。通过控制滚动距离，在窗口顶部显示指定的导航栏。要点：1.滚动事件最好加上防抖，减少性能压力。2.更容易实现固定高度的页面（每个模块的高度是固定的）。3、实现时注意向上滚动时，滚动值为负值。4、本方案不需要控制路由，也不需要锚定页面元素。5.初始化高度遍历。如果有异步加载的区域，则必须遍历获取异步加载后的高度。Solution2H5featuresIntersectionObserver创建一个IntersectionObserver实例（容器），并调用该实例的observe()方法来监控每一个需要导航的元素。1.滚动时改变导航栏的活动项，同时改变路由。当容器观察到内部元素越界时，改变导航栏的activetitle，同时改变路由状态。2、点击导航栏，页面会滚动到导航位置。通过锚点实现。要点：1.处理被观察元素从上到下越界的情况。2.当容器中存在多个观察元素时，处理活动导航栏的逻辑。在浏览器位置看到#，大概率是用到了IntersectionObserver。在遍历每个模块的高度时使用锚点跳跃会有点笨拙。
