function navAttach(nav, attach) {
// 擷取頂部導航
var nav = document.getElementById(nav);
// 沒有設定頂部導航吸附的類時,預設類名為"attach"
if (attach == undefined) {
attach = "attach";
}
// 給文檔綁定滾動事件
document.onscroll = function () {
// top代表的是此時此刻網頁被卷去的高度,每次滾動都會切換不同的值
var top = document.documentElement.scrollTop || document.body.scrollTop;
// 擷取頂部導航到浏覽器的垂直高度
var t = getPos(nav).top + nav.offsetHeight;
// 如果頁面滾動到了相應的高度
if (top > t) {
// 讓頂部導航吸附
nav.className = attach;
} else {
// 如果滾回去了,解除頂部導航的吸附效果
nav.className = "";
}
}
}
/*
* 求元素到頁面的絕對距離:
* 調用方法:getPos("需求取絕對距離的元素").left,得到元素距離左側的絕對距離
* getPos("需求取絕對距離的元素").top,得到元素距離上側的絕對距離
* 參 數:1個必選,然後直接使用函數的傳回值
*/
getPos = function (ele) {
// 初始左邊距和上邊距都為0
var l = 0;
var t = 0;
// 當元素存在定位父級(即ele.offsetParent不為null)時,執行本循環内的代碼塊
while (ele.offsetParent) {
// 初始的邊距累加元素的邊距和邊框寬度
l += ele.offsetLeft + ele.offsetParent.clientLeft;
t += ele.offsetTop + ele.offsetParent.clientTop;
// 将元素替換為元素的定位父級(疊代)
ele = ele.offsetParent;
}
// 等上面的循環體結束後才會輸出{}
return {
'left': l,
'top': t
};
}