jQuery页面向下滚动导航固定代码

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

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

以下是 jQuery页面向下滚动导航固定代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<title>jQuery页面向下滚动导航固定代码 </title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" >
</head>  
<body> 
<div id="nav-wrap" style="height:1900px;background:#FC0;margin-top:40px;position:relative;">
	<ul id="nav" style="height:60px;background:#0F9;top:300px;position:absolute;width:100%;">
		<li>导航栏项目一</li>
		<li>导航栏项目二</li>
		<li>导航栏项目三</li>
		<li>导航栏项目四</li>
		<li>导航栏项目五</li>
	</ul>
</div>

<script>
$(function(){
	var a = $('#nav'),
		b =a.offset();
	$(document).on('scroll',function(){
		var	c = $(document).scrollTop();
		if(b.top<=c){
			a.css({'position':'fixed','top':'0px'})
			}else{
				a.css({'position':'absolute','top':'300px'})
				}
		})
	})
</script>
</body>  
</html>

CSS代码(index.css):

*{margin:0;padding:0;}
#nav-wrap{height:1900px;background:#FC0;margin-top:40px;position:relative;}
#nav{height:60px;background:#0F9;top:300px;position:absolute;width:100%;}
#nav li{float:left;width:20%;line-height:60px;text-align:center;list-style:none;}
#nav li:hover{background:#F90;}

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