之前文章中介紹過4種方法實現導航窗口跟隨置頂效果：
2、jQuery 智能判斷跟隨頁面滾動的導航、菜單、廣告，下拉后跟隨置頂特效代碼
3、jQuery - 多個菜單導航滾動跟隨，全部積累固定在頂端
以上四種方法都可以實現，最常用的就是第一個和第二個，這也是個人常用的導航跟隨特效代碼！
今天來分享的是即插即用的一種導航窗口跟隨特效，老白很喜歡這種簡單的特效：（親測可用）
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>窗口滾動跟隨的效果</title>
</head>
<body>
<div id="wrapper" style="width:960px; margin:0 auto">
<div id="header" style="height:100px"><h1>頭部</h1></div>
<!-- 除了 id="left" style="position:relative; top:0" ，其他的都只是擺設 -->
<div id="secondary_content" style="float:left; width:190px; background:#DDD; border:2px solid #660000; position:relative; top:0;">
<h3>左側欄區</h3>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
</div>
<div id="main_content" style="float:right; width:750px; background:#DDD; height:10000px"><h2>右邊內容區塊</h2></div>
</div>
</body>
</html>
<script type="text/javascript">
//獲取對象的初始位置
var t = document.getElementById('secondary_content').offsetTop;
window.onscroll = function() {
//IE與Mozilla為前者，Chrome取后者的值
var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
//滾動時分兩種情況考慮，再賦值
document.getElementById('secondary_content').style.top = scroll_top > t ? scroll_top - t + 'px' : 0;
}
</script>