h5页面两个吸顶tab切换第二个tab从头开始显示

问题描述：滚动条滚动到最后时，切换其他tab，滚动条依旧是旧的

解决办法：用一个固定定位记录tab的初始位置，这样可以防止页面还没加载完就滑动页面了，值也不会改变

核心代码：

<template>
  <div class="content">
    <div class="tab-box" style="z-index: 1">
      第一个吸顶tab
    </div>
    <div style="height: 100vh;background: #10aeff">占位内容</div>
    <div class="fixed"></div>
    <div class="tab-box tab-box-second">
      <div @click="clickTab">第二个吸顶tab1</div>
      <div @click="clickTab">第二个吸顶tab1</div>
    </div>
    <div style="height: 100vh;background: #10aeff">占位内容</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      top: 0
    };
  },
  mounted() {
    this.top = document
      .getElementsByClassName("fixed")[0]
      .getBoundingClientRect().top;
  },
  methods: {
    clickTab() {
      //只有吸顶后切换tab才滚动到指定位置
      if (
        document
          .getElementsByClassName("tab-box-second")[0]
          .getBoundingClientRect().top <= 0
      ) {
        window.scrollTo({
          top: this.top,
          left: 0
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
.fixed {
  position: fixed;
}
.tab-box {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  gap: 10px;
}
</style>

展示效果