标签：demo var 项目 isp scrolltop style htm ati ide
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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><script src="/demos/googlegg.js"></script>
<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‘})
}
})
})
//方法二：
/*$(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‘,‘background‘:‘#fff‘,‘z-index‘:‘3‘,‘border-bottom‘:‘3px solid #ccc‘,‘box-shadow‘:‘2px 2px 2px 2px #555‘})
}else if(b.top>c){
a.removeAttr(‘style‘);
}
})
})*/
</script>
</body>
</html>
————————————————————
标签：demo var 项目 isp scrolltop style htm ati ide
原文地址：http://www.cnblogs.com/cuizhenyu/p/7389670.html
