<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
body {
background-color: #ccc;
}
.wrap {
width: 1120px;
margin: 0 auto;
}
/* 固定定位 */
.floor-nav {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 120px;
box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
border-radius: 0 8px 8px 0;
background-color: #fff;
}
.floor-nav li:hover {
color: #e02020;
}
.floor-nav li {
text-align: center;
padding: 16px 0;
font-size: 14px;
color: #6d7278;
position: relative;
cursor: pointer;
}
/* 边框 */
.floor-nav li:not(li:first-child)::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
border: 1px solid #f3f5f7;
top: 0;
width: 60px;
}
/* 新上好课*/
.course {
height: 800px;
background-color: seagreen;
}
/* 进站必学 */
.learn {
height: 600px;
background-color: #3498db;
}
/* 学习路线 */
.path {
height: 800px;
background-color: #e74c3c;
}
/* 慕课专栏 */
.special {
height: 1000px;
background-color: #16a085;
}
/* 限时拼团 */
.group {
height: 800px;
background-color: #34495e;
}
/* 头部导航 */
header nav {
height: 100px;
background-color: pink;
}
.floor-nav .active {
color: #e02020;
}
</style>
</head>
<body>
<!-- 大盒子 -->
<div class="wrap">
<!-- 导航部分 -->
<header>
<nav></nav>
</header>
<!-- 内容部分 -->
<ul class="content">
<li class="course">新上好课</li>
<li class="learn">进站必学</li>
<li class="path">学习路线</li>
<li class="special">慕课专栏</li>
<li class="group">限时拼团</li>
</ul>
<!-- 导航条 -->
<ul class="floor-nav">
<li class="active">新上好课</li>
<li>进站必学</li>
<li>学习路线</li>
<li>慕课专栏</li>
<li>限时拼团</li>
</ul>
</div>
<script>
var news = document.getElementById('new')
var le = document.getElementById('le')
/* 获取每一个内容区顶部的距离 */
var contents = document.querySelectorAll('.content li');
/* 获取所有的楼层导航 */
var floors = document.querySelectorAll('.floor-nav li')
/* 得到的放到新数组 */
var arr = [];
/* 遍历每一个li */
for (i = 0; i < contents.length; i++) {
/* 通过offsetTop得出每一个距离，然后放入新数组 */
arr.push(contents[i].offsetTop)
}
/* 遍历每一个楼层导航的li */
for (j = 0; j < floors.length; j++) {
/* 定义一个自定义变量 */
floors[j].index = j;
/* 为楼层导航添加点击事件 */
floors[j].onclick = function() {
window.scrollTo({
/* 点击一个li滚去 */
top: arr[this.index],
/* 滚动的过渡 */
behavior: 'smooth'
})
}
}
/* 页面滚动时卷曲的高度 */
window.onscroll = function() {
/* 获取卷曲高度 兼容写法*/
var h = document.documentElement.scrollTop || document.body.scrollTop;
/* 定义一个变量记录楼层 */
var index = 0;
for (var i = 0; i < arr.length; i++) {
/* 判断位置 */
if (h + 200 > arr[i]) {
index = i
} else {
break;
}
}
/* 遍历 */
for (var j = 0; j < floors.length; j++) {
/* 删除上次的状态 */
floors[j].classList.remove('active')
}
/* 添加新的类 */
floors[index].classList.add('active')
}
</script>
</body>
