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
};
}