本文实例为大家分享了jQuery实现电梯导航模块的具体代码，供大家参考，具体内容如下
功能模块
1、当页面滚动到电器的模块， 显示电梯导航
2、点击电梯导航中的 li， 页面滚动到对应的内容区域
3、为当前点击的 li 添加 current 类
4、页面内容滚动到第几个区域， 左侧的电梯导航自动高亮对应的 li
5、为页面滚动设置节流阀(点击 li 时， 不进行第4步判断)
html部分结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<ul class="sidebar"> <li>手机模块</li> <li>电器模块</li> <li>产品模块</li> <li>服装模块</li> <li>鞋子模块</li> </ul> <section class="main"> <div>手机模块</div> <div class="model">电器模块</div> <div>产品模块</div> <div>服装模块</div> <div>鞋子模块</div></section> |
css部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
* { margin: 0; padding: 0; margin: 0 auto; } div { width: 600px; height: 600px; border: 1px solid red; } li { list-style: none; border: 1px solid #abcdef; cursor: pointer; } .sidebar { display: none; position: fixed; left: 0; top: 350px; width: 66px; height: 200px; } .current { background-color: red; } |
jQuery部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
//节流阀开启 var flag = true //页面滚动事件 $(window).scroll(function() { // 当页面滚动到电器模块侧边栏显示 $(this).scrollTop() >= $('.model').offset().top ? $('.sidebar').show() : $('.sidebar').hide() // 遍历div $('.main div').each(function(i, item) { if (flag == false) { return } var Top = $(item).offset().top // 滚动的距离大于等于当前盒子离顶部的距离 if ($(window).scrollTop() >= Top) { //显示高亮 $('.sidebar li').eq(i).addClass('current').siblings().removeClass('current') } }) }) //点击让li,出现在对应的位置 //绑定点击事件,获取索引,获取楼层与顶部的距离,给html添加动画 $('.sidebar li').click(function() { // 节流阀关闭了 flag = false // 改变背景颜色 // 获取当前的索引值 var index = $(this).index() // 获取当前索引位置上的盒子离顶部的距离 var top = $('div').eq(index).offset().top // 给html添加动画 $('html,body').animate({ scrollTop: top }, function() { flag = true }) //点击显示高亮 $(this).addClass('current').siblings().removeClass('current')}) |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_38007986/article/details/111164634
