如何让粘性定位的v-tabs始终位于可滚动隐藏的Vuetify v-app-bar下方

下面分两种可行方案，都可以解决你的问题： #

方案1：纯CSS实现（推荐，无需写JS） #

Vuetify的v-app-bar开启hide-on-scroll后，滚动隐藏时添加的v-app-bar--is-scrolled类实际绑定的是transform: translateY(-100%)的隐藏样式，你可以用相邻兄弟选择器联动tabs的top值：
修改你的sticky类CSS如下：

.sticky {
    position: sticky;
    /* 默认app-bar显示时，tabs粘在app-bar下方 */
    top: 48px;
    z-index: 1;
}
/* 当app-bar滚动隐藏时，tabs直接粘在页面顶部 */
.v-app-bar--is-scrolled + .sticky {
    top: 0;
}

注意：如果你的v-app-bar和v-tabs不是直接相邻的同级元素，可以把相邻选择器+换成后代选择器，匹配到对应结构即可；如果你的app-bar高度不是默认的48px，自行替换为实际高度值即可。

方案2：JS响应式适配 #

你之前的思路只差一步：v-app-bar实例上的isScrollingUp属性本身是响应式的，可以直接监听：

1. 给v-tabs动态绑定top样式：

<v-tabs
    class="sticky"
    grow
    v-model="tab"
    :style="{ top: `${navbarTopOffset}px` }"
>

2. 新增data变量和watch监听：

data() {
  return {
    // 初始状态app-bar显示，默认偏移为app-bar高度
    navbarTopOffset: 48
  }
},
watch: {
  // 直接监听v-app-bar实例内置的响应式滚动方向属性
  '$refs.navbar.isScrollingUp'(isUp) {
    this.navbarTopOffset = isUp ? 48 : 0
  }
}

3. 原有sticky类去掉top属性即可：

.sticky {
    position: sticky;
    z-index: 1;
}

两种方案都可以实现你要的效果：向下滚动时app-bar隐藏，tabs贴顶部；向上滚动时app-bar弹出，tabs自动贴在app-bar下方，不会互相遮挡。

内容的提问来源于stack exchange，提问作者svenema