吸顶效果实现具体流程

<template>
  <!-- 吸顶 -->
  <div id="app">
    <div class="box100">0</div>
    <div class="box100">100</div>
    <div class="dxbox" id="target" :class="{ targetFixed: isFixed }">
      这是吸顶的部分噢
    </div>
    <div class="box100">300</div>
    <div class="box100">400</div>
    <div class="box100">500</div>
    <div class="box100">600</div>
    <div class="box100">700</div>
    <div class="box100">800</div>
    <div class="box100">900</div>
    <div class="box100">1000</div>
    <div class="box100">1200</div>
    <div class="box100">1300</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFixed: false,
      targetTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFun);
    this.targetTop=document.querySelector('#target').offsetTop
  },
  methods: {
    scrollFun() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > this.targetTop) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.targetFixed {
  position: fixed;
  top: 0;
}

.dxbox {
  width: 100%;
  height: 100px;
  background: rgba(34, 115, 0, 0.806);
  border: 1px solid black;
}
.box100 {
  height: 100px;
  background: #3a8ee6;
  border: 1px solid black;
}
</style>