JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置

项目背景：

一天小虎找到龙哥说，龙哥你有没有现成的JS板子，就是那种当页面滚动到某个位置时，页面中的某个元素则固定在顶部不在滚动，而小于这个位置之后这个元素又恢复到原来的状态。

实现：这里做了一个简单的实现，前提是不要考虑浏览器兼容了，如果你要考虑，就自己解决吧，对一个前端来说这应该不是什么难事。

接下来看源码:

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.box{height:50px;background:#ccc;width:100%;}
</style>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="box"><div class="info"></div></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">
var oInfo = $(".info");
var oTop = $(".box").offset().top;
var sTop = 0;
$(window).scroll(function(){
sTop = $(this).scrollTop();
oInfo.text(sTop + '-' + oTop);//这一句 只是为了看看数据 没有多大的用处
if(sTop >= oTop){
$(".box").css({"position":"fixed","top":"0"});
}else{
$(".box").css({"position":"static"});
}
});
</script>

要知道，这里我引入了JQ库，用提百度cdn的库，考虑速度嘛，百度怎么也要强悍一些。现在你只需要拷贝代码到你的HTML文件中就可以运行看到效果了，如果你显示器的分辨率很大，就请在元素的下面再增加一些 br 吧，这样就可以看到效果了。