蓝色区域属于 1 楼
黑色区域属于 7 楼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li{
list-style-type: none;
}
a{
text-decoration: none;
display: block;
height: 35px;
width: 35px;
position: relative;
top: 0;
left: 0;
color: #666;
}
a span{
display: block;
position: absolute;
top: 0;
left: 0;
width: 35px;
color: #FFF;
visibility: hidden;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
a p{
display: block;
width: 10px;
margin: auto;
height: 0;
line-height: 0;
font-size: 0;
border-top: 1px solid #e5e5e5;
}
a:hover span{
color: #FFFFFF;
background: red;
visibility: visible;
}
a:hover p{
visibility: hidden;
}
.two span{
height: 25px;
line-height: 12px;
padding: 5px 0;
padding: 7px 0 3px\9;
}
.sss b{
visibility: hidden;
}
.sss span{
visibility: visible;
color: red;
}
#box{
margin: 0 auto;
width: 1190px;
}
.box{
position: fixed;
bottom: 100px;
left: 50%;
margin-left: 595px;
z-index: 9999;
text-align: center;
width: 35px;
font-size: 12px;
}
li{
width: 100%;
height: 700px;
}
.li{
background: red;
}
#li1{
background: blue;
}
#li2{
background: green;
}
#li3{
background: aqua;
}
#li4{
background: gray;
}
#li5{
background: orangered;
}
#li6{
background: saddlebrown;
}
#li7{
background: black;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).on('scroll',function(e){
var $nav = $('.a');
var scrollTop = $(this).scrollTop();
var $floor = $('li[id^=li]'); // ^= 表示是以什么开始的
var floorId = "";
$floor.each(function(index,Ele){
var offsetTop = $(Ele).offset().top;
if( scrollTop >= offsetTop ){
floorId = "#" + $(this).attr('id');
}else{
return false;
}
});
$nav.filter('[href='+floorId+']') //jquery中filter方法的含义是：在一个集合中筛选出所需要的元素
.addClass('sss')
.siblings().removeClass('sss');
if( scrollTop < $floor.first().offset().top || scrollTop > $floor.last().offset().top + $floor.last().height() ){
$nav.removeClass('sss');
}
});
});
</script>
</head>
<body>
<div id="box">
<ul>
<li class="li"></li>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
<li id="li5"></li>
<li id="li6"></li>
<li id="li7"></li>
<li class="li"></li>
</ul>
<div class="box">
<a href="#li1" target="_self" class="a">
<b>1F</b>
<span>风景</span>
<p></p>
</a>
<a href="#li2" target="_self" class="a two">
<b>2F</b>
<span>风景<br />风景</span>
<p></p>
</a>
<a href="#li3" target="_self" class="a">
<b>3F</b>
<span>风景</span>
<p></p>
</a>
<a href="#li4" target="_self" class="a">
<b>4F</b>
<span>风景</span>
<p></p>
</a>
<a href="#li5" target="_self" class="a two">
<b>5F</b>
<span>风景<br />风景</span>
<p></p>
</a>
<a href="#li6" target="_self" class="a">
<b>6F</b>
<span>风景</span>
<p></p>
</a>
<a href="#li7" target="_self" class="a">
<b>7F</b>
<span>风景</span>
<p></p>
</a>
</div>
</div>
</body>
</html>
