如何用JavaScript制作网页导航层级指示功能？

本文共计904个文字，预计阅读时间需要4分钟。

我们在网上经常看到一些页面层级指示的效果，比如淘宝、京东、百度等，用来指引用户浏览页面位置。现在，我们就来打造类似的交互效果。

我们上网经常看到一些页面层级指示的效果，比如淘宝、京东、百度百科等，用于指示用户浏览页面到哪里了。可以起到很好的交互效果，现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView 和 getBoundingClientRect方法，原理是监听页面滚动元素，当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口，就可以标识右边的指示栏。