首先我们获取容器的滚动距离scrollTop ，然后我们再用这个滚动距离和咱们需要吸顶的容器距离顶部的距离做一个比较。

<template>
  <div>
    <div class="box">
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <div class="box_fixed" id="boxFixed" :class="{'is_fixed' : isFixed}">我是固定的</div>
      <h3>快下来</h3>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
      <h4>吸顶测试</h4>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false,
      offsetTop: 0
    };
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
    });
  },
  methods: {
    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    }
  },
  //回调中移除监听
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style lang="scss" scoped>
.box_fixed {
  width: 500px;
  height: 40px;
  border: 2px dashed pink;
  border-radius: 20px;
  margin: 0 auto;
  line-height: 40px;
  background: #eeeeee;
}
.is_fixed {
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>

GIF 2020-5-22 16-02-31.gif