封装吸顶导航js （固定导航）

一、自定义 绑定响应函数

/*** 自定义 绑定响应函数 ***/
export const bindEventFunc = (obj, eventStr, func) => {
    if (obj.addEventListener) {
        // 大多数浏览器支持, IE8 及以下不支持
        obj.addEventListener(eventStr, func, false);    // false 指定在捕获的阶段的时候不触发事件
    } else {
        // IE5 - IE10 支持
        obj.attachEvent("on"+eventStr, function(){
            func().call(obj);
        });
    }
}

二、获取滚动条当前的位置

/*** 获取滚动条当前的位置 ***/
export  const getScrollTop = () => {
    let scrollTop = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;  // 火狐 IE9 及以下滚动条是 HTML 的
    } else if (document.body) {
        scrollTop = document.body.scrollTop;   // chrome 滚动条是body的
    } else if (window.pageYOffset) {
        scrollTop = window.pageYOffset;  // IE10 及以上 window.pageXOffset
    }
    return scrollTop;
}

三、固定吸顶导航封装

/**  固定吸顶导航封装  2019-09-20
 *   navBar      想要固定的导航
 *   webBody         页面主体部分
 *   fixedNavBarClassName  吸顶导航固定时的高度（导航高度+距离主体部分的高度）
 *   navBarClassName       吸顶导航未固定时的高度
 *   navHeight   导航高度
 *   marginTop   主体部分距离导航的高度
 */
export const fixedNav = (fixedNavConfig) => {
    // 加载时先设置一个默认的margin-top
    if (fixedNavConfig.webBody) {
        fixedNavConfig.webBody.style.cssText = `margin-top: ${fixedNavConfig.marginTop}px;`;
    }

    bindEventFunc(window, 'scroll', ()=>{
        if (getScrollTop() > 40) {
            fixedNavConfig.navBar.className = fixedNavConfig.fixedNavBarClassName;
            fixedNavConfig.webBody.style.cssText = `margin-top: ${fixedNavConfig.navHeight + fixedNavConfig.marginTop}px;`;
        } else {
            fixedNavConfig.navBar.className = fixedNavConfig.navBarClassName;
            fixedNavConfig.webBody.style.cssText = `margin-top: ${fixedNavConfig.marginTop}px;`;
        }
    });
}