爱华网jquery 实现滚动条滚到一定高度时，导航栏固定
实现原理：得到当前的滚动高度，判断当前滚动高度大于某个高度时，对导航栏设置其样式，将导航栏固定。否则，还原导航栏的样式。
具体示例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,p,div,ul,li{margin:0px;padding:0px;}
p{text-align:center;}
.nav{border:1px solid green;position:relative;height:30px;}
.nav ul{list-style-type:none;height:30px;background:#333;}
.nav ul li{float:left;width:100px;text-align:center;height:30px;line-height:30px;}
.nav ul li a:link{color:white;text-decoration:none;}
.nav ul li a{display:block;}
.nav ul li a:hover{background:#f60;}
.show{background:#f60;}
.fixednav{position:fixed;top:0px;left:0px;width:100%;}
.nav ul li>ul li{background:blue;}
</style>
<script type="text/javascript" src="../../jquery.js"></script>
<script>
?$(function(){
var nav=$(".nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
? if(sc.scrollTop()>=60){
? ? nav.addClass("fixednav");?
? ?$(".navTmp").fadeIn();?
? }else{
? ?nav.removeClass("fixednav");
? ?$(".navTmp").fadeOut();
? }
}) ?
? ? ? //鼠标经过li对象时，查找li下的ul.
?$("ul li").hover(function(){
$(this).find("ul").show();
?},function(){
$(this).find("ul").hide();
?})
?})
</script>
</head>
<body>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<div></div>
<div>
? <ul>
? ? <li><a href="#">首页</a></li>
? ? <li><a href="#">随笔</a>
<ul>
<li><a href="#">人生感悟</a></li>
? ? <li><a href="#">成功励志</a></li>
? ? <li><a href="#">生活锁事</a></li>
? ? </ul>
</li>
? ? <li><a href="#">素材</a></li>
? ? <li><a href="#">编程</a></li>
? </ul>
</div>
<p>我爱学习</p>
<p>我爱学习</p>
jquery 实现滚动条滚到一定高度时，导航栏固定_jquery滚动条
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
<p>我爱学习</p>
</body>
</html>
