<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.floorNav{
width:30px;
height:auto;
border:1px solid #ddd;
position:fixed;
top:150px;
left:50px;
display:none;
}
.floorNav li{
width:30px;
height:30px;
border-bottom:1px solid #ddd;
line-height:30px;
text-align:center;
position:relative;
font-size:12px;
cursor:pointer;
}
.floorNav li span{
width:30px;
height:30px;
background: #f00;
color:#fff;
position:absolute;
left:0;
top:0;
display:none;
}
.floorNav li.hover span{
display:block;
}
.floorNav li.hover span.active{
background: #f00;
color:#fff;
}
.floorNav li span.active{
background: #fff;
color:#f00;
display:block;
}
.floorNav li.last{
background: #f00;
color:#Fff;
border-bottom:none;
}
#header{
width:800px;
height:1000px;
background: #2af;
margin:0 auto;
font-size:50px;
line-height:1000px;
text-align:center;
}
#main .floor{
width:800px;
height:600px;
line-height:600px;
text-align:center;
color:#fff;
margin:0 auto;
font-size:100px;
}
#footer{
width:800px;
height:400px;
background: #f00;
margin:0 auto;
}
</style>
</head>
<body>
<!-- 樓層導航 -->
<ul class="floorNav">
<li>1F<span>服飾</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>
<li class="last">Top</li>
</ul>
<!-- 樓層 -->
<div id="header">頭部</div>
<div id="main">
<div class="floor" style="background:#456">服飾</div>
<div class="floor" style="background:#f9e">美妝</div>
<div class="floor" style="background:#e33">運動</div>
<div class="floor" style="background:#ab3">數碼</div>
<div class="floor" style="background:#c56">家電</div>
<div class="floor" style="background:#ff3">手機</div>
<div class="floor" style="background:#a2f">居家</div>
<div class="floor" style="background:#b3b">母嬰</div>
<div class="floor" style="background:#78c">服務</div>
<div class="floor" style="background:#0fd">零食</div>
<div class="floor" style="background:#0c9">戶外</div>
</div>
<div id="footer"></div>
<script src="./jquery-1.11.1.min.js"></script>
<script>
$('.floorNav li').not(':last').hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
$('.floorNav li').not(':last').click(function(){
//找點擊元素的下標
var $index = $(this).index();
//獲取右邊對應塊距離文檔頂部的距離
var $fTop = $(".floor").eq($index).offset().top;
// console.log($fTop);
// 設置文檔的滾動高度爲對應塊句距離文檔頂部的距離
$('html,body').animate({"scrollTop":$fTop},1000);
$('.floorNav li').find("span").removeClass("active");
$(this).find('span').addClass('active');
})
//獲取頭部的高度
var $top = $('#header').height();
$(window).scroll(function(){
var arr=[];
var $sTop = $(this).scrollTop();
$('#main .floor').each(function(index,element){
var $height =$(element).offset().top + $(element).height()/2;
if($sTop<$height){
// console.log(index);
arr.push(index);
}
})
// console.log(arr);
var _index = arr[0];
$('.floorNav li').find("span").removeClass("active");
$('.floorNav li').eq(_index).find('span').addClass('active');
if($sTop>=$top){
$('.floorNav').fadeIn();
}else{
$('.floorNav').fadeOut();
}
});
$(".last").click(function(){
$('html,body').animate({"scrollTop":0})
})
</script>
</body>
</html>
