jQuery实现电梯导航模块
功能模块
- 当页面滚动到电器的模块， 显示电梯导航
- 点击电梯导航中的 li， 页面滚动到对应的内容区域
- 为当前点击的 li 添加 current 类
- 页面内容滚动到第几个区域， 左侧的电梯导航自动高亮对应的 li
- 为页面滚动设置节流阀(点击 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)
})
