天天看點

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

繼續閱讀