VUE“粘性”阅读进度条

矫情吗；* 2022-05-10 08:10 181阅读 0赞

这个进度条是网上一个实例，原实例使用jQuery实现的[查看][Link 1]，最近在用vue-cli，所以就用vue实现该组件[查看][Link 2]。  
这个进度条有有意思的地方是：用户的一系列操作都和导航息息相关。一般来说，普通的导航，只是通过点击显示不同的内容或滚动到其他指定位置，至于用户在页面上的其他操作(滚动等)是和导航很少有关系，但是这个导航不一样，用户在页面上的一切操作都和导航相关。  
废话不多说了，我们来分析一下这个导航是如何实现的以及这里面有哪些玄机？  
样式我们就不多说了，这个基本都会。  
首先我们分析一下页面的动画效果：  
①当页面滚动超过导航所在位置时，导航固定到顶部，否则导航按顺序排列在页面中。  
②当页面滚动到每个指定的文本段落时，对应的导航节点处于激活状态。  
③随着页面在指定文本节点之间滚动时，导航条的长度是跟着增加的。  
④导航节点悬浮时的节点圆圈颜色和导航条的颜色一致，并且文字会上移。  
⑤当页面宽度小于700px，导航条消失。  
现在我们总结上面的结果，并设置合理的流程。我们不难发现上面的动画和页面的滚动事件有关系，所以我们需要在页面dom渲染完毕时，监听页面滚动。对于上面效果，我们可以用以下实现：  
①获取导航距离页面顶部的距离，通过滚动事件及时检测页面滚动距离是否大于等导航距离页面顶部的距离，如果是则固定导航，否则取消固定。  
②获取每个文本段落到页面顶部距离，当滚动距离超过节点距离就激活对应的导航节点，否则取消激活状态  
③当滚动距离小于第一个文本段落到顶部的距离时，导航激活条的长度为0；当滚动距离小于最后一个文本段落到顶部的距离时，导航激活条的长度为100%；否则计算页面滚动距离和对应的导航激活条的长度  
④通过检测页面已经滚动超过的文本段落，可以给对应的导航节点圆圈添加激活状态；文字上移就是transform: translateY();  
⑤通过适配就可以完成  
注意，这里的难点：  
①导航固定时，要给一个占位元素代替导航的高度否则页面会闪现，并对页面滚动的计算也不利。  
②计算导航激活条的长度：  
/\*\*  
\* 计算活动线的长度  
\* 如果当前页面滚动的距离没有达到计算的起始距离，活动线的宽度重置为0，且不进行任何操作  
\* 如果当前距离超出页面的结束距离，则活动线的宽度等于最大宽度  
\* 否则根据页面滚动的距离计算活动线的长度  
\* 计算规则：  
\* 首先你要明白页面的滚动的距离所占百分比和活动线每段的百分比不相同：例如：  
\* 活动线长100，有6个文本节点和导航节点，导航节点平分为5段，每段长度为16.67%；  
\* 但是文本的长度并不平均分配，假设第一节点和第二节点之间的总长度也为100，但是5段距离为12 18 26 24 20；  
\* 这时候页面滚动的距离和超出第一节点25，这时候要计算活动线的长度？  
\* 首先我们先看文本节点的间距中的1个长度分别表示多少活动线的长度  
\* 第一段：1 / 12 \* 16.67%;  
\* 第二段：1 / 18 \* 16.67%;  
\* …  
\* 所以文本的每一段长度代表的活动线的长度并不一致。  
\* ①已知长度与第一段的距离相比，是否大于此段长度  
\* ②如果是则现在导航长度加上16.67%，已知长度减去此段文本长度  
\* ③否则将(已知长度/此段文本长度)\*导航平均长度  
\* ④重复上面几个步骤，知道已知长度小于文本长度  
\* 所以根据上面的规则：  
\* let width = 0;  
\* 25 > 12; width += 16.67%; 25 - 12 = 13;  
\* 13 < 18; width += 13 / 18 \* 16.67%;  
\*/  
最后给出js源码：

[Link 1]: http://www.17sucai.com/preview/1160620/2018-05-02/progressbar/index.html
[Link 2]: https://babulongbo007.github.io/webSite/dist/index.html#/Navs