电梯导航
话不多说，直接放代码
- html 结构
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<script src="./js/jquery.js"></script>
</head>
<body>
<!-- 版心 -->
<div class="w">
<!-- 头部 -->
<header>
header
</header>
<!-- 导航栏 -->
<nav>
nav
</nav>
<!-- 电梯层 -->
<div class="wrap">
<div class="wrap_con">
<div class="con1">con1</div>
<div class="con2">con2</div>
<div class="con3">con3</div>
<div class="con4">con4</div>
<div class="con5">con5</div>
</div>
</div>
<!-- 底部 -->
<footer>
footer
</footer>
<!-- 电梯遥控器 -.- -->
<div class="slide_nav">
<span class="active">con1</span>
<span>con2</span>
<span>con3</span>
<span>con4</span>
<span>con5</span>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>
- css 样式
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
.w {
width: 1280px;
margin: 0 auto;
}
header {
height: 100px;
background-color: #30f3f4;
}
nav {
margin: 20px 0;
height: 100px;
background-color: #ff3040;
}
.wrap_con {
width: 100%;
height: 100%;
}
.wrap_con>div {
width: 100%;
height: 500px;
margin-bottom: 20px;
font-size: 30px;
text-align: center;
font-weight: 700;
line-height: 500px;
color: #fff;
}
.con1 {
background-color: #333;
}
.con2 {
background-color: #555;
}
.con3 {
background-color: #777;
}
.con4 {
background-color: #999;
}
.con5 {
background-color: #aaa;
}
footer {
height: 500px;
background-color: #3040ff;
}
.slide_nav {
display: none;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100px;
}
.slide_nav span {
float: left;
width: 80%;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.active {
background-color: #ff3040;
color: #fff;
}
- jQuery 代码
$(function() {
// 3. 定义节流阀，控制一个页面同时只能由一个动画在进行
let flag = true // true 表示有动画正在进行
// 1. 当页面滚动到 nav 区域， 让侧边栏显示出来
$(window).scroll(function() {
// 1.1 获取 nav 区域离上边的距离
let top = $('nav').offset().top
// console.log(top);
// 1.2 当页面滚动到 nav 区域，显示侧边栏
// if ($('html,body').scrollTop() >= top) {
// $('.slide_nav').show()
// } else {
// $('.slide_nav').hide()
// }
// 1.2 三元表达式
$('html,body').scrollTop() >= top ? $('.slide_nav').show() : $('.slide_nav').hide()
// 4. 当页面滚动到对应区域的时候，让对应的 span 高亮
$('.wrap_con>div').each(function(i, item) {
// 如果有动画正在进行，return
if (flag == false) return
// 4.1 首先获取到每个电梯层离页面顶部的距离
let floorTop = $(item).offset().top
// 4.2 当页面滚动到对应区域，让对应的 span 高亮
if ($(window).scrollTop() >= floorTop - 1) { // - 1 是因为浏览器计算式会丢失精度，可能高亮的不准确
$('.slide_nav span').eq(i).addClass('active').siblings().removeClass('active')
}
})
})
// 2. 给每个 span 注册点击事件
$('.slide_nav span').click(function() {
// console.log(this);
// 3.1 做动画之前先检查有没有动画在进行
if (flag == false) {
// 如果有，直接退出函数
return false
}
// 3.2 并且关闭节流阀
flag = false
// 2.1 获取索引号
let index = $(this).index()
// 2.2 点击每个span 获取对应的内容区域的高度
let currentTop = $('.wrap_con>div').eq(index).offset().top
// console.log(currentTop);
// 2.3 给整个页面做动画，显示对应的区域
$('html,body').animate({
scrollTop: currentTop
}, function() {
// 3.3 动画完成之后通过回调函数打开节流阀
flag = true
})
// 2.4 通过添加类名来改变背景色
$(this).addClass('active').siblings().removeClass('active')
})
})
注意点：
