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 {
  width: 100%;
  min-height: 700px;
}
// 高度，寬度，背景色根據需求，自行調整
.sticky-title {
  z-index: 999;
  position: sticky;
  top: -2%;
  background: #fff;
  width: 100%;
}
</style>

 

 

 只提供一種思路，如果不足之處多多交流指正，如有更好的解決方案，還望不吝指導。