<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>楼梯式导航</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{text-decoration: none;}
a img{
display: block;
border: none;
}
li{
list-style: none;
}
#mainPage{
1210px;
margin: 0 auto;
}
#header{
height: 1000px;
background: pink;
font-weight: bold;
font-size: 30px;
}
#fotter{
height: 1000px;
background: pink;
font-weight: bold;
font-size: 30px;
}
#slide{
30px;
height: 250px;
box-shadow: 0 0 3px #000000;
position: fixed;
top:50%;
margin-top: -125px;
background: palegreen;
}
#slide ul li{
30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 12px;
color: #000000;
cursor: pointer;
}
.active{
background: #FF6600;
color: #FFFFFF;
}
</style>
<script type="text/javascript" src="../js/jquery-1.12.1.min.js" ></script>
</head>
<body>
<div id="mainPage">
<div id="header"></div>
<div class="content"><img src="img/01.jpg"/></div>
<div class="content"><img src="img/02.png"/></div>
<div class="content"><img src="img/03.png"/></div>
<div class="content"><img src="img/04.png"/></div>
<div class="content"><img src="img/05.png"/></div>
<div class="content"><img src="img/06.png"/></div>
<div class="content"><img src="img/07.png"/></div>
<div class="content"><img src="img/08.png"/></div>
</div>
<div id="fotter"></div>
<div id="slide">
<ul>
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
</ul>
</div>
<script type="text/javascript">
(function(){
var $slide = $('#slide');
var $slideLi = $('#slide ul li');
var $content = $('.content');
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
if(scrollTop > 400){
$slide.show();
for (var i = 0; i < $content.length; i++) {
if($content.eq(i).position().top > scrollTop){
if(i - 1 >=0){
$slideLi.eq(i-1).addClass("active").siblings().removeClass("active");
break;
}
if(i == $content.length - 1){
$slideLi.eq(i).addClass("active").siblings().removeClass("active");
}
}
}
}else{
$slide.hide();
}
});
$slideLi.click(function(){
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
var top = $content.eq(index).position().top;
$('html,body').animate({scrollTop:top},500);
})
})();
</script>
</body>
</html>