html 分级切换菜单_仿知乎顶部菜单自动变换效果

HTML部分：
<div id="fix-menu-warp">
  <div id="menu-scroll-div" style="top: 0px;">
    <div id="main-menu">主菜单</div>
    <div id="details-menu">详情菜单</div>
  </div>
</div>;




CSS部分：
#fix-menu-warp {
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 10000;
    box-shadow: 0 1px 3px rgba(26,26,26,.1);
    overflow: hidden;
}
#menu-scroll-div {
    position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    transition: 0.5s all ease;
}
#main-menu {
    height: 50px;
    width: 100%;
    background-color: brown;
    text-align: center;
    display: block;
    transition: 0.5s all ease;
    line-height: 50px;
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
}
#details-menu {
    height: 50px;
    width: 100%;
    background-color: pink;
    text-align: center;
    transition: 0.5s all ease;
    display: block;
    line-height: 50px;
    margin: 0;
    padding: 0;
}




JavaScript部分：
function changeTopMenu() {
    var oldScrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
    var menutimeout;
    return function () {
        var newScrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
        if (newScrollTop === 0) {
            //如果已经在最上面了却还要滑动，就显示主菜单;
            document.getElementById('menu-scroll-div').style.top = 0;
        } else if (newScrollTop < oldScrollTop) {
            //如果在往上滑，切换到主菜单;
            //切换到主菜单（防抖）;
            if (menutimeout) {
                clearTimeout(menutimeout);
                menutimeout = setTimeout(() => {
                    document.getElementById('menu-scroll-div').style.top = 0;
                    oldScrollTop = newScrollTop;
                }, 100)
            } else {
                menutimeout = setTimeout(() => {
                    document.getElementById('menu-scroll-div').style.top = 0;
                    oldScrollTop = newScrollTop;
                }, 100)
            }
        } else if (newScrollTop > oldScrollTop) {
            //如果在往下滑，切换到详情菜单;
            //切换到详情菜单（防抖）;
            if (menutimeout) {
                clearTimeout(menutimeout);
                menutimeout = setTimeout(() => {
                    document.getElementById('menu-scroll-div').style.top = -50;
                    oldScrollTop = newScrollTop;
                }, 100)
            } else {
                menutimeout = setTimeout(() => {
                    document.getElementById('menu-scroll-div').style.top = -50;
                    oldScrollTop = newScrollTop;
                }, 100)
            }
        } else {
            //没滑动就不干什么;
            oldScrollTop = newScrollTop;
        }
    }
}

window.onscroll = changeTopMenu();

顶部菜单默认是这个样子

将网页向下滑动，菜单会自动变成这样，并且有过渡效果

原理：

其实就是两个菜单上下排列，用一个大div包裹起来，大div的高度只有其中一个子菜单那么高，将溢出部分隐藏，这样就看起来只有一个子菜单显示出来。

监听页面的滚动，往上滚就把上面的显示出来，往下滚就把下面的显示出来。

山寨思路：

监听页面的滚动，判断网上滚还是往下滚，然后修改menu-scroll-div的top值来达到切换效果。

修改上面的菜单的margin-top值也可以。

成果：

仿照知乎的顶部导航菜单自动切换效果，增加了防抖功能。

效果展示https://www.zhihu.com/video/1186884913671954432