jQuery侧边导航栏模块交互效果，导航栏点击事件、卷动事件、节流阀-CSDN博客

本文链接：https://blog.csdn.net/qq_64970126/article/details/125106296

任务分析：

当我们滚动到模块，就让电梯导航显示出来
点击电梯导航页面可以滚动到相应内容区域
核心算法:因为电梯导航模块和内容区模块——对应的
当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号，通过索引去链接内容模块
就可以把animate要移动的距离求出来:
当前索引号内容区模块它的offset().top

分析： $(this).index()//获取到我们点击的导航栏中的第几个盒子获取索引，因为导航和内容区域索引是一一对应的所以我们获取的索引也能联动到内容区域根据联动获取的值去衔接到内容得到其距离top顶端的值然后利用动画去实现跳转

任务：

当我们点击电梯导航某个小li，当前小li添加current类，兄弟移除类名
当我们页面滚动到内容区域某个模块，左侧电梯导航，相对应的小li模块，也会添加current类，兄弟移除current类。

触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。
需要用到each，遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
判断的条件:被卷去的头部大于等于内容区域里面每个模块的offset).top

电梯导航案例JS源码分析：

此案例需要使用节流阀方法，因为我们制作过程中注册了点击事件和页面滚动事件，页面滚动事件利用each遍历元素的方法，去获取文本内容节点元素的索引将获取过来的索引链接到侧边导航栏的节点元素当中为侧边导航小模块设置排他效果，设置自己清空它人。然后点击事件时是获取侧边导航的index值链接到内容节点当中然后利用文本.index()去得到盒子顶部距离文档顶部距离的距离，利用动画去跳转到指定位置，此时的导航小模块背景也利用排它思维点亮。

此时节流阀就具有实战意义了，因为我们页面卷动，滚动事件当中就会根据我们卷动的距离去动态改变侧边导航的小模块背景，然后我们使用点击事件时页面就会跳转到指定的位置，而此时因为页面滚动侧边的导航小模块背景会一直变化出现过bug样式，而节流阀就可以为我们点击事件发生时去锁住页面卷动的代码，直到我们跳转到指定的位置，在动画内容当中利用回调函数去重置flag让其变为true，因此在后面页面滚动时节流阀就不会受影响。