jQuery实现电梯导航模块
时间：2021-09-22 07:09:24 | 栏目：jquery | 点击：次
本文实例为大家分享了jQuery实现电梯导航模块的具体代码，供大家参考，具体内容如下
功能模块
1、当页面滚动到电器的模块， 显示电梯导航
2、点击电梯导航中的 li， 页面滚动到对应的内容区域
3、为当前点击的 li 添加 current 类
4、页面内容滚动到第几个区域， 左侧的电梯导航自动高亮对应的 li
5、为页面滚动设置节流阀(点击 li 时， 不进行第4步判断)
html部分结构
<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部分
* {
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部分
//节流阀开启
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')
})
