jQuery页面滚动浮动导航切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery页面滚动浮动导航切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQueryҳ��������������л�����</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>
	<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>

JS代码(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);
}
);
}
);

CSS代码(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;}

CSS代码(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:0;margin:0;}
fieldset,img,html,body,iframe{border:0;}
table{border-collapse:collapse;border-spacing:0;}
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;}

附件:下载该文件资源,减少时间成本(增值服务)