vue实现置顶功能

需求背景：项目中需要将某个标题置顶，但element没有支持置顶的组件，所以手动实现（原生js），效果如下图：

1）解决思路：先找到当前页面，滚动条所在dom，然后添加滚动条监听事件，对比滚动条的高度和置顶内容的offsetTop高度，大于则开启置顶，小于则还原。

2）话不多说上代码

// 示例代码

<template>
  <div class="main">
    <div class="title" :class="isSticky ? 'sticky-title' : '' " :style="{'margin-top': marginTop}">
      <div>置顶部分内容</div>
    </div>
    <div>
      <div style="height: 300px;background-color: #6950a1">滚动展现的内容1</div>
      <div style="height: 300px;background-color: #6950a1">滚动展现的内容2</div>
      <div style="height: 300px;background-color: #6950a1">滚动展现的内容3</div>
      <div style="height: 300px;background-color: #6950a1">滚动展现的内容4</div>
      <div style="height: 300px;background-color: #6950a1">滚动展现的内容5</div>
    </div>
  </div>
</template>
<script>
let _that = null;

export default {
  name: '',
  data() {
    return {
      curDom: null, // 滚动条节点
      isSticky: false, // 是否置顶
      marginTop: 0 // 设置置顶部分外边距
    }
  },
  mounted(){
    this.$nextTick(() => {
      this.stickyEvent();
    })
  },
  methods:{
    stickyEvent(){
      _that = this;
      const myDom = Array.from(document.getElementsByClassName('title'));
      if (myDom.length) {
        this.offsetTop = myDom[0].offsetTop; // 置顶内容距离顶部的距离
      }
      // 找到滚动条所在节点，很关键，否则监听无效
      const scrollDom = Array.from(document.getElementsByClassName('el-main'));
      if (scrollDom.length) {
        this.curDom = scrollDom[0];
        // 开启滚动监听
        this.curDom.addEventListener('scroll', this.handleScrollEvent);
      }
    },
    // 滚动监听事件函数，注意this的指向问题
    handleScrollEvent(){
      const scrollTop = _that.curDom.scrollTop; // 滚动条高度
      if(scrollTop >= _that.offsetTop) {
        // 开启置顶，计算位置
        _that.isSticky = true;
        _that.marginTop = _that.offsetTop + 'px';
      } else {
        _that.isSticky = false;
        _that.marginTop = 0;
      }
    }
  },
  destroyed () {
    // 离开页面，关闭监听，释放资源同时避免报错
    this.curDom.removeEventListener('scroll', this.handleScrollEvent);
  }
}
</script>
<style lang="scss" scoped>
.main {
   100%;
  min-height: 700px;
}
// 高度，宽度，背景色根据需求，自行调整
.sticky-title {
  z-index: 999;
  position: sticky;
  top: -2%;
  background: #fff;
   100%;
}
</style>

 只提供一种思路，如果不足之处多多交流指正，如有更好的解决方案，还望不吝指导。