<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#LoutiNav{
position: fixed;
top: 25%;
left: 40px;
30px;
border: 1px solid ;
}
#LoutiNav ul li{
position:relative;
30px;
height:30px;
list-style:none;
text-align:center;
line-height: 30px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px dotted #AAAAAA;
}
#LoutiNav ul li.last {
background: darkred;
color: white;
border-bottom: none;
}
#LoutiNav ul li span{
display: none;
30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color:red;
}
#LoutiNav ul li:hover span{
display: block;
background: darkred;
color: white;
}
#LoutiNav ul li span.active {
display: block;
background: white;
color: red;
}
#LoutiNav ul li:hover span.active{
display: block;
background: darkred;
color: white;
}
#header,#main,#footer {
margin: auto;
1000px;
text-align: center;
font-size: 40px;
font-weight: bold;
line-height: 500px;
}
#main div{
height: 700px;
font-size: 50px;
color: honeydew;
line-height: 700px;
}
#header{
height: 500px;
background: darkcyan;
}
#footer{
height: 500px;
background: darkcyan;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="LoutiNav">
<ul>
<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>
<!--楼层内容开始-->
<div id="header">头部</div>
<div id="main">
<div class="Louti" style="background: #cc0033;">服饰</div>
<div class="Louti" style="background: #999933;">美妆</div>
<div class="Louti" style="background: #ccff33;">手机</div>
<div class="Louti" style="background: #006633;">家电</div>
<div class="Louti" style="background: #6666cc;">数码</div>
<div class="Louti" style="background: #ff6600;">运动</div>
<div class="Louti" style="background: #ffcc00;">居家</div>
<div class="Louti" style="background: #3333ff;">母婴</div>
<div class="Louti" style="background: #ff00cc;">食品</div>
<div class="Louti" style="background: #669900;">图书</div>
<div class="Louti" style="background: #ff66cc;">服务</div>
</div>
<div id="footer">尾部</div>
<!--楼层内容结束-->
</body>
</html>
<script type="text/javascript">
/*
思路：
1、点击左侧楼层号，对应的楼层字体红色
改变 对应的楼层位置 （滚动条滚走的距离）
2、点击top按钮，回到顶部
3、触发滚动条，根据滚动条滚走的距离 设置楼层号的样式
关键判断： 当前哪一个楼层在可视区的高度超出了 h/2
*/
var $list = $("#LoutiNav li:not(.last)");
var $floor = $(".Louti");
var flag = true;
$list.click(function(){
flag = false;
$(this).find("span").addClass("active").end().siblings().find("span").removeClass();
var index = $(this).index();
var t= $floor.eq(index).offset().top;
$("body,html").animate({"scrollTop" : t},1000,function(){
flag = true;
});
})
$(".last").click(function(){
flag = false;
$list.find("span").removeClass("active");
$("body,html").animate({"scrollTop" : 0},1000,function(){
flag = true;
});
})
$(window).scroll(function(){
if( flag ){
var sTop = $(document).scrollTop();
$f=$floor.filter(function( index ){
return Math.abs($(this).offset().top - sTop) < $(this).height()/2;
})
var index = $f.index();
if( index != -1 ){
$list.eq(index).find("span")
.addClass("active")
.end()
.siblings()
.find("span")
.removeClass("active");
}
if( sTop < 100 ){
$list.find("span").removeClass("active");
}
}
})
</script>