天天看点

javascript实现顶部导航的吸附效果,1-2个参数

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

继续阅读