這篇文章涉及到“滾動條”的相關東東。
需求（兼容性IE9 +）是類似於stickUp.js一樣的效果，根據頁面的滾動（滾動），對導航條的位置進行不同的調整。除此之外，點擊首屏的按鈕，頁面會滾動到指定的次屏。
這個需求看起來很簡單，但在完成的過程中遇到了幾個問題：
頁面滾動的監聽（滾動事件監聽器）應該綁定在哪個元素上？窗口，doucment，body，html？
通過哪個元素的何種屬性來控制頁面，使其滾動到指定的位置？
取得 body 捲動後的高度：http://www.eion.com.tw/Blogger/?Pid=1154
參考資料講解了 JavaScript 和 jQuery 兩種方式，並有範例可以線上測試效果。
指定符合網頁的文件型別宣告 <!DOCTYPE html> 正確取得 document.documentElement.scrollTop 滾動元素捲動後的高度，使用判斷方式以符合不同之 IE, Firefox, Chrome, Safari, Opera 瀏覽器。
判斷瀏覽器
document.compatMode = CSS1Compat 標準模式
window.opera Opera 顯示為 [object Opera] 其他瀏覽器則顯示為 undefined
window.opera Opera 顯示為 [object Opera] 其他瀏覽器則顯示為 undefined
JavaScript
function getScrollTop(){ var bodyTop = 0; if (typeof window.pageYOffset != "undefined") { bodyTop = window.pageYOffset; } else if (typeof document.compatMode != "undefined" && document.compatMode != "BackCompat") { bodyTop = document.documentElement.scrollTop; } else if (typeof document.body != "undefined") { bodyTop = document.body.scrollTop; } /*顯示出捲動後的高度值*/ document.getElementById("jsScrollTop").innerHTML = bodyTop; }
0
jQuery .scroll()
jQuery .scroll() 事件可用於滾動的元素和瀏覽器視窗物件 window。
只需將函數綁定到指定元素的 scroll 事件，當瀏覽者滾動指定的元素時則會觸發捲動 scroll 事件運行指定的 function 函數。
$(function () { $(window).scroll(function () { var scrollVal = $(this).scrollTop(); $("span.qScrollTop").text(scrollVal); }); });
1070
if(scrollVal > 500){ /* 如果滾動的物件捲動 > 500 則觸發指定的動作。*/ }
