elementUI树展示吸顶效果

elementUI增加部门本部节点，且滑动过程中本部需要吸顶，具体实现效果图如下：

 

实现代码分享：

html部分：

<div class="researchWork first">
  <!-- 左边树，固定定位   -->
  <div class="left-tree-box">
    <el-scrollbar ref="listbox" class="list-box" style="height:100%;">
     <!--   本部节点点击不收缩展开属性  :expand-on-click-node="false"-->
      <el-tree id="el-tree"  :data="treeList" :highlight-current="true" class="tree" :indent="14" :props="{children: 'children',label: 'name'}" :default-expand-all="true"></el-tree>
    </el-scrollbar>
  </div>
</div>

js部分：

initTree () {
    this.loading = true
  //queryBusinessLineTree() 封装的接口方法名
    queryBusinessLineTree().then(res => {
       // this.treeList = res;
       this.treeList = this.data // 假数据模拟
        setTimeout(()=>{
            // 获取第一级菜单元素
            var tempArr = document.getElementsByClassName('el-tree')[0].children
            console.log(tempArr,'tempArr')
            var tempArr2 = []
            // 过滤掉不相关元素
            for(let element of tempArr){
                if (element.className === 'el-tree-node is-expanded is-focusable') {
                    console.log(element.classList,'rr')
                    element.classList.add('group')
                    console.log(element.classList,'rr')
                    element.children[0].classList.add('group_title')
                    tempArr2.push(element)
                }
            }
            // 滚动监听
            this.$refs.listbox.wrap.addEventListener('scroll', () => {
                for(let element of tempArr2){
                    // 获取比对点数据
                    console.log(element,'element1111111')
                    var boxTop = document.getElementsByClassName('list-box')[0].getBoundingClientRect().top
                    var ulTop = element.getBoundingClientRect().top
                    var ulBottomMinus = element.getBoundingClientRect().top + element.getBoundingClientRect().height - 26
                    var ulBottom = element.getBoundingClientRect().top + element.getBoundingClientRect().height
                    console.log(boxTop,'boxTop',ulTop,'ulTop',ulBottomMinus,'ulBottomMinus',ulBottom,'ulBottom')
                    // 移除浮动类
                    element.classList.remove('top-end')
                    element.classList.remove('top')
                    // 吸顶
                    if (ulTop <= boxTop && boxTop <= ulBottom) {

                        element.classList.add('top')
                    }
                    // 交接
                    if (ulBottomMinus <= boxTop && boxTop <= ulBottom) {
                        element.classList.add('top-end')
                    }
                    console.log(element.classList,'element.classList')
                }
            })

        },500)
    }).catch(() => {
    });
},

样式部分：

.researchWork {
  margin: 15px;
  box-sizing: border-box;
  background: #fff;
  height: calc(100% - 30px);
  position: relative;
  display: flex;

  .left-tree-box {
    margin: 20px;
    padding: 10px;
    width: 20%;
    border: 1px solid #ccc;
    height: calc(100% - 70px);
    overflow: auto;
    display: inline-flex;
    border-radius: 5px;
  }
}

.first{
    .el-scrollbar__wrap{ overflow-x:hidden; overflow-y:auto;}
    .list-box{ height:99%; position:relative; }
    .el-tree{ position:static}
    .el-tree > .el-tree-node > .el-tree-node__content{background:#edf1f8;color:#a4a4b3}
    .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__expand-icon{ visibility: hidden; font-size:0; padding:5px; }
    .el-tree > .el-tree-node > .el-tree-node__children{ margin-left:-12px;}
    .el-tree-node__content{color:#aaa}
    .el-tree-node__children .el-tree-node__content{color:#606266}
    .el-tree-node:focus > .el-tree-node__content{/*background:#eee;*/}
    .el-tree > .is-current > .el-tree-node__content{/*background:#edf1f8 !important;*/}
    .el-tree .top{ padding-top:26px}
    .el-tree .top .group_title{ position:absolute; top:0; left:0; width:100%; z-index: 1;}
    .el-tree .top-end{ position: relative;}
    .el-tree .top-end .group_title{ position:absolute; top:auto; bottom:0; left:0; width:100%; z-index: 1;}
    .el-scrollbar{overflow:visible !important;}
  }
.el-scrollbar__thumb{
  transform: translateY(0%) !important;
  height: 0 !important;
}
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #f0f7ff !important;
  }

数据定义部分：

data: [{
    name: '研究院',
    children: [{
        name: '信息化应用',
        children: [{
            name: '集团合同数据监管项目'
        },
            {
                name: '移动办公'
            }]
    },
        {
            name: '发票平台部研发产品线',
            children: [{
                name: 'ERP系统完善'
            },
                {
                    name: '三级'
                }]
        }]
}, {
  name: '研发部111111111111',
  children: [{
    name: '信息化应用qq',
    children: [{
      name: 'aaaaaaaaa'
    },
      {
        name: '移动办公'
      }]
  },
    {
      name: 'cccccccccccc',
      children: [{
        name: 'ERP系统完善'
      },
        {
          name: '三级'
        }]
    }]
},{
    name: '质量保障本部',
    children: [{
        name: '质量保障生态产品支撑部',
        children: [{
            name: '三级'
        },
            {
                name: '三级'
            }]
    }, {
        name: '质量综合处',
        children: [{
            name: '三级'
        },
            {
                name: '三级'
            }]
    }]
},{
  name: '质量保障本部111111',
  children: [{
    name: '质量保障111111111',
    children: [{
      name: '三级1'
    },
      {
        name: '三级1'
      }]
  }, {
    name: '质量综合处1',
    children: [{
      name: '三级1'
    },
      {
        name: '三级1'
      }]
  }]
}, {
    name: '信息中心',
    children: [{
        name: '人工智能与大数据产品线',
        children: [{
            name: '三级'
        },
            {
                name: '三级'
            }]
    }, {
        name: '数据资源应用及开发',
        children: [{
            name: '三级'
        },
            {
                name: '三级'
            },
            {
                name: '三级'
            },
            {
                name: '三级'
            },
            {
                name: '三级'
            },
            {
                name: '三级'
            }]
    }]
}],

// 树结构假数据
treeList: [],