<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
}
i{
font-style: normal; /*设置字体样式不倾斜*/
}
.floor{
height: 600px;
text-align: center;
line-height: 600px;
font-size: 50px;
}
#header{
height: 300px;
background: pink;
text-align: center;
line-height: 300px;
font-size: 50px;
}
#floorNav{
80px;
height: auto;
position: fixed;
border: 1px solid #ccc;
top: 200px;
left: 50px;
font-size: 20px;
/*display: none;*/
}
#floorNav li{
80px;
height: 80px;
text-align: center;
line-height: 80px;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
#floorNav li:last-child{
border-bottom: none;
}
#floorNav li i{
display: none;
}
#floorNav .active{
background: black;
color: #fff;
}
#floorNav li:hover i{
display: block;
background: block;
color: #fff;
}
#floorNav li:hover span{
display: none;
}
#goTop{
80px;
height: 80px;
text-align: center;
line-height: 80px;
position: fixed;
right: 20px;
bottom: 50px;
background: red;
color: #fff;
display: none;
}
#goTop:hover{
background: green;
}
</style>
<body>
<div id="header">头部</div>
<div id="wrap">
<div class="floor" style="background: red;">建材</div>
<div class="floor" style="background: yellow;">板材</div>
<div class="floor"style="background: green;">型材</div>
<div class="floor"style="background: blue;">精品</div>
</div>
<div id="floorNav">
<li class="active">
<span>1F</span>
<i>建材</i>
</li>
<li>
<span>2F</span>
<i>管材</i>
</li>
<li>
<span>3F</span>
<i>板材</i>
</li>
<li>
<span>4F</span>
<i>精品钢</i>
</li>
</div>
<div id="goTop">
置顶
</div>
<script type="text/javascript">
$(function(){
var oNav=$('#floorNav') //获取到楼层
var aNav=oNav.find('li') //获取具体的楼层导航
var oDiv=$('#wrap .floor') //获取具体的楼层
var oTop=$('#goTop') //获取回到顶部按钮
//滚动窗口楼层导航变化
$(window).scroll(function(){
//height()
var winH=$(window).height()
//console.log(winH)
var oScrollTop=$(window).scrollTop() //获取滚动的距离
//滚动一定距离让楼层导航和回到顶部按钮出现
if(oScrollTop>$('#header').height()){
oNav.fadeIn() //淡入
oTop.fadeIn()
}else if(oScrollTop<$('#header').height()){
oNav.fadeOut() //淡出
oTop.fadeOut()
}
oDiv.each(function(){
console.log($(this).index())
if(winH+oScrollTop-$(this).offset().top>winH/2){
aNav.removeClass('active')
aNav.eq($(this).index()).addClass('active')
}
})
})
//点击
aNav.click(function(){
//alert($(this).index())
var floorTop=oDiv.eq($(this).index()).offset().top
//alert(floorTop)
$('body,html').animate({
'scrollTop':floorTop
},400)
$(this).addClass('active').siblings().removeClass('active')
})
$('#goTop').click(function(){
$('body,html').animate({
'scrollTop':0
},500)
})
})
</script>
</body>
</html>