固定位置
当滚动条移动到某一位置时，让页面某些内容固定，如导航条，让固定的一直显示，当达到一定条件，再取消固定，达到了固定的目的。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定位置实现</title>
<style type="text/css">
*{
padding: 0;
margin: 0 auto;
}
#top{
width:1000px;
height:200px;
background: blue;
}
#menu{
width:1000px;
height: 40px;
background: red;
/*position: fixed;*/
}
#menu.guding{
position: fixed;
top:0;
left:0;
/*top，left设置的是menu的固定位置，不可省略*/
}
#main{
width:1000px;
height: 1000px;
background: green;
}
</style>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(document).scrollTop()>=200){//当页面向上滑动200像素时，执行函数
var left=($(window).width()-1000)/2;//(窗口的宽度-内容区域的宽度)/2;计算出内容居中时的left值
$('#menu').addClass('guding');//为menu添加class，让其固定
$('#menu').css('left',left+'px');//设置left值，让其居中
}else{
$('#menu').removeClass('guding');//如果移动返回到200以内，删除clas，取消固定
}
})
})
</script>
</head>
<body>
<div id="top"></div>
<div id="menu"></div>
<div id="main"></div>
</body>
</html>
