用原生自己编写一个头部导航实现索引功能-CSDN博客

本文链接：https://blog.csdn.net/weixin_49600762/article/details/129163366

每个人的表达都不一样，可能我的标题并不能让大家了解到这文章想干嘛，所以就放一个图吧，我觉得有这个需求的应该看到这图都懂了的，再不清楚我想表达啥的话我只能说你是我前辈了，我是从我的零基础模式阐述了。

这就是一个页面的头部导航，每一个高亮代表对应相应的内容。

这个就是头部导航的div框架，这里做到的是当页面没有滚动过的时候，这部分是隐藏的，TopNavigation就是控制整个头部导航显示或隐藏的布尔值，这里要导航在显示的时候吸顶显示就要给定位position: fixed;样式。v-for就是遍历头部导航的四个元素啦，click就是给每个导航元素部分添加点击事件，当点击改元素时就跳转到对应的页面部分，：class就是使用了三元表达式给对应的导航元素高亮，：id就是每个元素后面都要用原生点击执行到，所以要给id。

这部分呢就是对应导航元素的相应页面了，看标签名就可以看出来啦，这里没有太多的东西，就是自己相应页面要渲染的数据，记得给id值就好，因为后面这也要有原生来获取对应的页面滚动高度。

这个就是data里的数据了，这些你不想被浏览器报红undefined就写一下吧。

这个图就是整个实现的重点了，可能会有点不清晰的逻辑，我尽量讲懂吧，毕竟我还是觉得我的表达不是那么的好呢。

首先1.位置呢就是一个监听页面的滚动时间，如果不敲这一行你下面就不用敲了，都没监听了，怎么实现功能。在2.位置呢就是上面说到的头部导航的一个显示隐藏的实现：意思就是当滚动上去的页面大小高度超过“1”的时候this.TopNavigation的布尔值就位真，头部导航显示；反之但当滚动上去的页面大小高度小于“2”的时候this.TopNavigation的布尔值就位假，头部导航隐藏。（这里肯定有人说1.几的时候呢，我只想说的鼠标滚动没有让我出现这种情况，的确会有，反正意思你理解了，非要搞完的话，你自己改到严谨吧，我总不能帮你写好开发的是吧。）先讲6.这部分吧，因为我当时实现的时候就是这样开发顺序的，按照逻辑顺序免得说错，这里就是点击头部导航元素的时候拿到它的id，赋值给到number，当number为0的时候window.scrollTo(0, 0);意思就是窗口滚到（0,0）位置，第一个0表示Y轴，第二个做自己猜。同理当number为1的时候window.scrollTo(0, 0);这里的第二个零就应该是对应<download id="one" :files="detail.files"></download>（看第三张图就知道这是啥了）这个的页面X轴坐标了，但是每次打开不痛后台接口返回的数据不一样，这个X轴的值肯定也不一样，所以

这部分就是用原生获取X轴的值，第一行意思就是找到id为“one”的document，第二行就是跳转到这个页面，其实这里已经实现跳转了，但由于我的头部导航用的定位占用了部分的可视窗口了，所以我为了效果更好，我还是拿到了对应的X轴scrollTop后减去119头部导航占用高度得到真正的scrollTops1再用window.scrollTo(0, this.scrollTops1);实现跳转页面，其实后面滚动到页面对应的导航元素高亮也要用到这个X轴的值，所以还是听我的话，跟着敲吧。后面的number为2为3的时候跟1的是一样的，不懂就照敲吧。

最后一个需求就是滚动页面时相应页面的对应导航元素高亮了，把眼睛放到4.处这里的if判断的条件是为了这一步在这只执行一次，如果你的页面进来之后的高度不会发生变化了的话就直接一个布尔值控制它就好，我这用两个只要是下面的页面有折叠页面，可以展开收起的，所以我这就写成这样，当页面发生变化的时候我就把this.showscrollTop改为真，再次滚动时就重新执行一次4.这步。4.处引用到了3.函数就是主动用原生全部点击一边头部导航获取到scrollTops1， 2， 3的值，从而用这三个值来执行5.的判断，所以这里敲代码的顺序是 2.4.5.。要是搞错了你就等报错吧。5.出就是用实时的scrollTop与scrollTops1， 2， 3比较，判断页面对应哪一部分的页面导航元素，从而给高亮模式。