基于Vue3实现点击Tab平滑滚动并吸顶效果的完整代码

<template>
  <div class="container">
    <!-- 背景图 -->
    <div class="bgpic">...</div>
    
    <!-- Tab 栏（添加 ref 用于获取 DOM） -->
    <div class="tab" :class="{'h5-tab': isMobile}" ref="tabRef">
      <div class="tab-box">
        <div class="tab-content">
          <span 
            v-for="item in sortedMenuList" 
            :key="item.id"
            @click="handleChose(item)"
            :class="{ 'current-tab': currentTab == item.menuName }"
          >
            {{ item.menuName }}
          </span>
        </div>
      </div>
    </div>

    <!-- 内容区（各 Tab 对应组件） -->
    <div class="content">
      <div v-show="currentTab == '流域项目'">...</div>
      <div v-show="currentTab == '省级项目'">...</div>
      ...
    </div>
  </div>
</template>

.tab {
  height: 96px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 👇 核心：sticky 定位实现吸顶 */
  position: sticky;
  top: 95px; /* 与 App.vue 中 .content 的 padding-top 一致 */
  z-index: 10;
}

.content { padding-top: v-bind('isWelcome ? 0 : "95px"'); }

const handleChose = (val, skipAnimation = false) => {
  // 1. 更新当前 Tab 和菜单 ID
  currentTab.value = val.menuName;
  menuId.value = val.id;

  // 2. 重置子组件状态（略）

  // 3. 【关键】移动端或跳过动画时直接返回
  if (isMobile.value || skipAnimation) return;

  // 4. 平滑滚动到 Tab 位置
  nextTick(() => {
    const bgpic = document.querySelector('.bgpic');
    const bgpicHeight = bgpic ? bgpic.offsetHeight : 0;
    const layout = document.querySelector('.layout');
    
    if (layout) {
      setTimeout(() => {
        // 目标滚动位置 = 背景图高度（即 Tab 的 offsetTop）
        layout.scrollTo({
          top: bgpicHeight,
          behavior: 'smooth'
        });
      }, 0);
    }
  });
};

// 通用获取元素相对于滚动容器的 offsetTop
function getOffsetTop(element, container) {
  let offsetTop = 0;
  let el = element;
  while (el && el !== container && el !== document.body) {
    offsetTop += el.offsetTop;
    el = el.offsetParent;
  }
  return offsetTop;
}

// 在 handleChose 中使用
nextTick(() => {
  const layout = document.querySelector('.layout');
  const tabEl = tabRef.value;
  if (layout && tabEl) {
    const offsetTop = getOffsetTop(tabEl, layout);
    const headerHeight = 95; // 或动态获取
    layout.scrollTo({
      top: offsetTop - headerHeight,
      behavior: 'smooth'
    });
  }
});