<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery页面滚动浮动导航切换代码 - xw素材网</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#item1" class="cur">One</a></li>
<li><a href="#item2">Two</a></li>
<li><a href="#item3">Three</a></li>
<li><a href="#item4">Four</a></li>
<li><a href="#item5">Fir</a></li>
</ul>
</div>
<div id="content">
<div class="item" id="item1">
<h1>1F</h1>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.xwcms.net/" target="_blank">xw素材网</a></p>
</div>
</div>
<div class="item" id="item2">
<h1>2F</h1>
</div>
<div class="item" id="item3">
<h1>3F</h1>
</div>
<div class="item" id="item4">
<h1>4F</h1>
</div>
<div class="item" id="item5">
<h1>5F</h1>
</div>
</div>
</body>
</html>
menu.js
$(document).ready(function(){
$(window).scroll(function(){
var top = $(document).scrollTop(); //定义变量，获取滚动条的高度
var menu = $("#menu"); //定义变量，抓取#menu
var items = $("#content").find(".item"); //定义变量，查找.item
var curId = ""; //定义变量，当前所在的楼层item #id
items.each(function(){
var m = $(this); //定义变量，获取当前类
var itemsTop = m.offset().top; //定义变量，获取当前类的top偏移量
if(top > itemsTop-100){
curId = "#" + m.attr("id");
}else{
return false;
}
});
//给相应的楼层设置cur,取消其他楼层的cur
var curLink = menu.find(".cur");
if( curId && curLink.attr("href") != curId ){
curLink.removeClass("cur");
menu.find( "[href=" + curId + "]" ).addClass("cur");
}
// console.log(top);
});
});
menu.css
#content{width: 100%;height: auto; margin: 0 auto;}
#content div{width: 100%; height: 868px; margin: 0 auto;}
#content div#item1{background-color: #00ff00}
#content div#item2{background-color: #279756}
#content div#item3{background-color: #2ce3e5}
#content div#item4{background-color: #5e57e7}
#content div#item5{background-color: #ca61ae}
#content div h1{font-size: 36px; color: #fff;}
#menu{width: 88px;height: auto; position: fixed;top: 50%;right: 15px;margin-top: -135px;}
#menu ul{display: block;list-style: none}
#menu ul li a{width: 88px; height: 54px; line-height: 54px; text-align: center;background-color: #fff;color: #32c96a;display: block}
#menu ul li a:hover,#menu ul li a.cur{background-color: #32c92a;color: #fff;}
reset.css
*[hidefocus]{outline:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:;margin:;}
fieldset,img,html,body,iframe{border:;}
table{border-collapse:collapse;border-spacing:;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:100%;}
caption,th{font-weight:normal;font-style:normal;text-align:left;}
em,strong{font-weight:bold;font-style:normal;}
body,textarea,select,input{font-family:helvetica,arial,simsun,sans-serif;font-size:14px;color:#000;}
body{background-color:#fff;}
a,button{cursor:pointer;}
a{text-decoration:none;color:#000; outline: none;}
a:hover{text-decoration:none;}
html,body{width:100%;height:100%;}
html{overflow:auto;overflow-y:scroll;}
