<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Scrolling Menu</title>
<link rel="stylesheet" href="menu.css">
</head>
<body>
<div id="menu">
<ul>
<li><a class="active" href="#floor-1">1st Floor</a></li>
<li><a href="#floor-2">2nd Floor</a></li>
<li><a href="#floor-3">3rd Floor</a></li>
<li><a href="#floor-4">4th Floor</a></li>
<li><a href="#floor-5">5th Floor</a></li>
</ul>
</div>
<div id="content">
<div class="floor" id="floor-1">
<p>1</p>
</div>
<div class="floor" id="floor-2">
<p>2</p>
</div>
<div class="floor" id="floor-3">
<p>3</p>
</div>
<div class="floor" id="floor-4">
<p>4</p>
</div>
<div class="floor" id="floor-5">
<p>5</p>
</div>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
/* CSS Document */
body{
color:white;
}
.floor{
height:800px;
background:black;
}
#menu{
background:white;
color:black;
position:fixed;
top:50%;
right:5%;
padding:0;
}
ul{
padding:0;
margin:0;
}
li{
display:block;
}
a{
text-decoration:none;
color:black;
}
.active{
background:grey;
}$(document).ready(function() {
$(window).scroll(function(){
var top=$(window).scrollTop();
var nav=$("#menu");
var cont=$("#content .floor");
var curId="";
cont.each(function() {
var $this=$(this);
var itemTop=$(this).offset().top;
if(top>itemTop-100){
curId="#"+$this.attr("id");
}else{
return false;
}
});
var currentLink=nav.find(".active");
if(curId&¤tLink.attr("id")!==curId){
currentLink.removeClass("active");
nav.find("[href="+curId+"]").addClass("active");
}
});
});http://download.csdn.net/detail/qq_17615475/9485858