前言

建议在 src 下新建一个 common 文件夹，新建 stickySlot.vue 文件

stickySlot.vue

<template>
  <div class="sticky" :style="getPosition">
    <div class="sticky-warp">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    getPosition() {
      let position = this.cssSupport('position', 'sticky') ? 'sticky' : 'relative';
      return 'position:' + position;
    }
  },
  mounted() {
    this.init();
  },
  deactivated() {
    if (this.cssSupport('position', 'sticky')) {
      return;
    }

    // 复位
    let elWarp = this.$el.querySelector('.sticky-warp');
    elWarp.position = 'absolute';
  },
  methods: {
    init() {
      if (this.cssSupport('position', 'sticky')) {
        return;
      }

      let el = this.$el;
      let target = this.$el.parentNode;
      let elWarp = this.$el.querySelector('.sticky-warp');
      let top = this.getNumberValue(document.defaultView.getComputedStyle(el).top);

      this.addScrollListen(target, () => {
        if (el.getBoundingClientRect().top <= top) {
          elWarp.style.position = 'fixed';
        }

        if (el.getBoundingClientRect().top >= 0 && elWarp.style.position != 'absolute') {
          elWarp.style.position = 'absolute';
        }
      });
    },
    cssSupport(attr, value) {
      let element = document.createElement('div');

      if (attr in element.style) {
        element.style[attr] = value;
        return element.style[attr] === value;
      } else {
        return false;
      }
    },
    getNumberValue(pxValue) {
      let value = String(pxValue).match(/^\-?\+?[0-9]+/g);
      return value ? Number(value) : undefined;
    },
    addScrollListen(target, cb) {
      target.addEventListener('y-scroll', (event) => {
        cb && cb(event);
      });
    }
  },
}
</script>

<style>
.sticky {
  width: 100%;
}

.sticky .sticky-warp {
  width: 100%;
  background: inherit;
  will-change: change;
  height: inherit;
  top: inherit;
}
</style>

组件使用

<template>
  <div>
    <ul>
      <li v-for="(item, index) in headerData" :key="index">{{ item }}</li>
    </ul>
    <!-- 这里需要给组件添加一个class，用于控制固定的位置，看css注释部分 -->
    <sticky-slot class="stickyTop">
      <div class="tab">假装这是一个tab栏, 当页面滚动的时候要固定在顶部</div>
    </sticky-slot>
    <ul>
      <li v-for="(item, index) in footerData" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import stickySlot from '@/common/stickySlot.vue';

export default {
  components: {
    stickySlot
  },
  data() {
    return {
      headerData: [],
      footerData: []
    };
  },
  mounted() {
    // 使用假数据撑满屏幕
    for (let i = 0; i < 20; i++) {
      this.headerData.push('第' + i + '条数据')
    };
    for (let i = 20; i < 80; i++) {
      this.footerData.push('第' + i + '条数据')
    }
  }
}
</script>

<style scoped>
/* 通过设置top的值，控制需要固定在什么位置，0是顶部，值为number(px) */
.stickyTop {
  top: 0;
  z-index: 10;
}

.tab {
  height: 30px;
  line-height: 30px;
  background-color: greenyellow;
}
</style>

效果图

到达顶部的时候固定在顶部，内容部分继续滚动

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。