<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.main{
width: 700px;
border: 1px solid red;
margin: 0 auto;
}
.main .floor{
height: 400px;
font-size: 60px;
color: white;
text-align: center;
line-height: 400px;
}
.red{
background: red;
}
.blue{
background: blue;
}
.green{
background: green;
}
.purple{
background: purple;
}
.pink{
background: pink;
}
.yellow{
background: yellow;
}
.floorMenu{
list-style: none;
width: 40px;
border: 1px solid black;
border-bottom: none;
position: fixed;
top: 40px;
left: 40px;
}
.floorMenu li{
width: 40px;
height:40px;
line-height: 40px;
border-bottom: 1px solid black;
text-align: center;
}
.floorMenu li.active{
background: black;
color: white;
}
</style>
</head>
<body>
<div class="main">
<ul class="floorMenu">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="floor red">1</div>
<div class="floor blue">2</div>
<div class="floor green">3</div>
<div class="floor purple">4</div>
<div class="floor pink">5</div>
<div class="floor yellow">6</div>
</div>
</body>
<script type="text/javascript">
//1. 获得每层楼距离页面顶部的距离，并将它们放入一个数组中。
var floorArr = [];
$(".floor").each(function(){
let everyTop = $(this).offset().top; //每个div距离页面顶部的距离。
floorArr.push(everyTop);
})
//2. 监听滚动条滚过的距离，根据距离去判断滚到了那一层楼。
//2.1 绑定滚动事件，并且获得滚动的距离
//用on来绑定的事件可以使用off取消，因为点击楼层的时候，会有附带的跑马灯效果。方便取消监听。
$(window).on("scroll",scrollMove)
function scrollMove(){
//滚动条滚动的距离
var scrollTop = $(window).scrollTop()+100;
var index = 0;
for(var i=0; i<floorArr.length; i++){
var now = floorArr[i]; //当前楼层距离顶部的距离
var next = floorArr[i+1]; //下一楼层距离顶部的距离。
if(scrollTop>=now && scrollTop<next){
index = i;
}else if(scrollTop>=floorArr[floorArr.length-1]){
index = floorArr.length-1;
}
}
//3. 根据楼层索引，去改变楼层导航的样式
$(".floorMenu li").eq(index).addClass("active").siblings("li").removeClass("active")
}
//4. 给楼层导航绑定点击事件。
$(".floorMenu li").click(function(){
//取消滚动监听
$(window).off("scroll");
$(this).addClass("active").siblings("li").removeClass("active");
//获得点击li的索引。
var idx = $(this).index();
//根据索引获取楼层顶部距离
var sTop = floorArr[idx];
$(document.body).animate({
scrollTop:sTop
},500,function(){ //回调函数，因为取消了监听事件，所以在点击完之后，在次调用监听事件。
$(window).on("scroll",scrollMove)
})
})
</script></html>
原文地址：https://www.cnblogs.com/baimeishaoxia/p/12219493.html
时间： 2024-11-15 05:54:45