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

2024-06-03 11:17:14

任务分析：

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

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

任务：

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

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

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

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

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

on注册事件的方法

jQuery侧边导航栏模块交互效果，导航栏点击事件、卷动事件、节流阀相关推荐

HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
Js鼠标悬停事件,简单的实现导航栏鼠标划过内容弹窗的效果.可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> < ...
php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
神奇的水滴效果导航栏-BezierIndicator
晨鸣的博客–神奇的水滴效果导航栏-BezierIndicator 很早之前就看见过这样一个特效心怡很久,却一直恐于自定义View这座大山.最近在突击自定义View的技能,学习贝塞尔曲线的绘制,前面搞 ...
魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下 ...
Vue实现导航栏吸顶效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
底部导航栏的凸起效果
微信小程序开发教程.开发教学本视频为1-1号视频,做出了底部导航栏的凸起效果第一次做视频,希望大家多多支持- 组件源码+项目源码: 链接:https://pan.baidu.com/s/1EkZx ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 我们接着再继续学习动态面板的应用,本篇课程我们来讲解一下,如何运用动态面板绘制导航菜单栏的手风琴效果. 我 ...

最新文章

热门文章