大佬教程收集整理的这篇文章主要介绍了模仿京东楼层跳转效果，附注释，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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>
以上是大佬教程为你收集整理的模仿京东楼层跳转效果，附注释全部内容，希望文章能够帮你解决模仿京东楼层跳转效果，附注释所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。