最近写项目遇到在main里面有组件需要设置吸顶 直接展示万能写法

methods:{
	 handleScroll() {
     let scrollTop = this.$parent.$el.scrollTop; //表示获取router-view上一级的scrollTop
      if (scrollTop > 170) {
        this.fixedDiv = true;
      } else {
        this.fixedDiv = false;
      }
    }
},
mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll, true);
  }

this.$parent.$el 是直接获取滚动区域的div 例如我的home组件为 滚动条触发区域在el-main 里面

 <el-main class="content-wrapper" :style="'background-color:'+variables.mainTheme">
      <!--使用keep-alive会将页面缓存-->
       <transition name="fade-transform" mode="out-in">
         <keep-alive :include="cachedViews">
           <router-view class="viewPage"></router-view>
         </keep-alive>
       </transition>
     </el-main>

注意的是 吸顶的div 当滚动条全部掩盖要吸顶的元素 在设置变量为true 替换class
例子中当scrollTop>170时 为条件 实际页面为160时候 元素被遮挡，建议多10个像素在出现 个人建议，请看情况采纳