吸顶效果

电梯效果：

左侧标题导航，右侧具体内容，
点击左侧导航，右侧滚动到对应内容
滚动右侧内容，左侧导航样式对应切换
左侧导航滚动时吸顶

跳转对应dom：

    使用a标签的href='#aaa'锚点跳转到对应id="aaa"的dom上；
    

导航吸顶效果：

    css：
    .nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    

滚动变化导航效果：

    通过$('.body').scroll(()=>{})监听页面滚动，
    $('.dom').offset().top获取指定dom距离顶部距离，
    设置高度范围，比如-100 ~ 100范围触发切换导航样式
    

通过vue的自定义指令实现

vue.directive('sticky', {
    bind(el,binding,vnode){
        function handler(e){
            let top=el.getBoundingClientRect().top
            if (top<=10) { 
                el.children[0].style.position="fixed" 
                el.children[0].style.top="10px" 
            } else {
                el.children[0].style.position="static"
                el.children[0].style.top="0"
            }
        }
        el._sticky={ handler } 
        document.addEventListener("scroll",handler,false)
    }, 
    unbind(el,binding){ 
        document.removeEventListener("scroll",el._sticky.handler,false) 
        delete el._sticky.handler 
    }