需求背景
最近也是应我一位同学的要求，给他的公司制作一个官网，那也就是拾起了一些基础的知识，搜索了一些其它的文章有实现这种效果的，但大多导航都是在侧边，然后点击导航对应的部分内容滑到最上面，跟我这次设计的交互有些偏差，所以自己也是实现了一把，比较简单，大体逻辑跟其它的比较类似。
要实现的效果预览
- 导航固定在顶部，背景色透明，向上滑动时背景色变为白色
- 向上滑动时候当相应的内容即将没过头部时，对应的导航变为激活态
- 当滑到最底部时，最后的导航设为激活态，因为有的设计稿最后一块儿的区域高度是撑不开一屏的，所以最后一个永远不会高亮
- 点击导航滑到对应的区域上，实现两者的联动效果
} } </script
html { overflow: hidden; } .box-col { height: 100vh; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; scroll-behavior: smooth; } .header { width: 100vw; background-color: #fff; height: 88px; position: fixed; z-index: 10; transition: background-color 0.3s; &-box { width: 1440px; height: 100%; display: flex; margin: 0 auto; justify-content: space-between; align-items: center; .logo-container { width: 199px; height: 42px; font-size: 24px; } .navBox { margin-left: 10px; display: flex; .navItem { color: #000000; padding: 8px 35px; cursor: pointer; &.active { border-radius: 5px; color: #fff; background: rgb(0, 108, 238); } } } } } #part1, #part2, #part3, #part4 { height: 500px; display: flex; justify-content: center; align-items: center; font-size: 24px; } #part1 { background-color: #ccc; } #part2 { background-color: #ccd; } #part3 { background-color: #cad; } #part4 { background-color: #cba; }备注： 用IntersectionObserver API更简便
