專案背景：

一天小虎找到龍哥說，龍哥你有沒有現成的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 吧，這樣就可以看到效果了。