<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0; padding: 0; border: none;}
ul, li {list-style: none;}
#loutiNav {
30px;
position: fixed;
left: 40px;
top: 25%;
border: 1px solid black;
}
#loutiNav li {
30px;
height: 29px;
border-bottom: 1px dashed white;
text-align: center;
line-height: 29px;
font-size: 12px;
position: relative;
cursor: pointer;
}
#loutiNav li span {
display: none;
position: absolute;
30px;
height: 29px;
left: 0;
top: 0;
background: darkred;
}
#loutiNav li:hover span{
display: block;
color: white;
}
#loutiNav li span.active {
display: block;
background: white;
color: darkred;
}
#head, #main div, #foot {
1000px;
height: 600px;
text-align: center;
line-height: 600px;
font-size: 100px;
margin: 0 auto;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.js" ></script>
<script>
$(function(){
//点击楼层按钮,页面是否正在移动
var isMoving = false;
//点击楼层按钮
$("#loutiNav li").click(function(){
//改变按钮的选中状态
$(this).find("span").addClass("active")
.parent().siblings().find("span").removeClass("active");
//下标
var index = $(this).index();
var top = $(".louti").eq(index).offset().top;
//$(window).scrollTop(top);
isMoving = true;
$("html, body").stop().animate({scrollTop:top}, 500, function(){
isMoving = false;
});
})
//scroll
$(window).scroll(function(){
if (isMoving == false) {
var scrollTop = $(window).scrollTop();
console.log(scrollTop);
//遍历
var index = 0;
$(".louti").each(function(){
var top = $(this).offset().top;
if (scrollTop >= top){
//console.log(top);
index = $(this).index();
}
})
//console.log(index);
//改变楼梯按钮的选中状态
$("#loutiNav li").eq(index).find("span").addClass("active")
.parent().siblings().find("span").removeClass("active");
}
})
})
</script>
</head>
<body>
<div id="loutiNav">
<ul>
<li>1F<span class="active">服饰</span></li>
<li>2F<span>美妆</span></li>
<li>3F<span>手机</span></li>
<li>4F<span>家电</span></li>
<li>5F<span>数码</span></li>
<li>6F<span>运动</span></li>
<li>7F<span>居家</span></li>
<li>8F<span>母婴</span></li>
<li>9F<span>食品</span></li>
<li>10F<span>图书</span></li>
<li>11F<span>服务</span></li>
</ul>
</div>
<div id="head" style="background: #008000;">头部</div>
<div id="main">
<div class="louti" style="background: #ABCDEF;">1F服饰</div>
<div class="louti" style="background: #003366;">2F美妆</div>
<div class="louti" style="background: #009988;">3F手机</div>
<div class="louti" style="background: #776611;">4F家电</div>
<div class="louti" style="background: #FF88FF;">5F数码</div>
<div class="louti" style="background: #FF3333;">6F运动</div>
<div class="louti" style="background: #60F043;">7F居家</div>
<div class="louti" style="background: #00CCDD;">8F母婴</div>
<div class="louti" style="background: #ABF0EF;">9F食品</div>
<div class="louti" style="background: #F78787;">10F图书</div>
<div class="louti" style="background: #666699;">11F服务</div>
</div>
<div id="foot" style="background: #008000;">底部</div>
</body>
</html>