基本需求:
1.当页面滑动到某个盒子时 导航栏显示出来
2.点击导航栏 可以直接移动到相应的位置
3.给点击的导航栏某一项 变化背景颜色(加上current类)
4.当页面滑动到某个盒子时 对应的导航栏也要固定到对应的位置
整体代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.guide{
display: none;
position: fixed;
top: 100px;
left: 20px;
width: 66px;
background-color:silver;
}
.guide li{
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
cursor: pointer;
list-style-type: none;
}
.box{
position: relative;
margin: 50px auto;
width: 600px;
height: 600px;
background-color: pink;
}
.current{
background-color: white;
}
</style>
</head>
<body>
<div class="guide"