Tengo una v-app-bar de Vuetify, que está configurada para ocultarse al desplazarse.

 <v-app-bar app hide-on-scroll ref="navbar" id="navbar" >

También tengo pestañas en V, que quiero colocar debajo de ellas:

 <v-tabs class="sticky" grow v-model="tab" > <v-tab :value="1">Tab 1</v-tab> <v-tab :value="2">Tab 2</v-tab> </v-tabs>

Clase pegajosa de CSS:

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

Esto funciona, en principio. Al desplazarse hacia abajo, la barra de la aplicación desaparece y las pestañas se quedan en la parte superior de la pantalla. Agradable.

Sin embargo, dado que la v-app-bar está configurada para ocultarse al desplazarse (que realmente me gustaría mantener así), significa que se oculta cuando se desplaza hacia abajo y vuelve a aparecer cuando se desplaza hacia arriba.

El problema es que se posiciona en la parte superior de la barra de v-app cuando reaparece. ¿Cómo puedo colocar las v-tabs siempre debajo de la v-app-bar que se esconde/reaparece?

Tengo algunos enfoques en mente, pero hasta ahora todos han fallado:

Enfoque de Js/Vue: si tan solo pudiera saber si la barra de la aplicación virtual está oculta o si está visible, podría agregar los 48 px en la parte superior del adhesivo. V-app-bar no emite ningún evento cuando aparece/oculta, pero puedo leer la altura de los componentes desde this.$refs.navbar.computedContentHeight , o desde document.getElementById('navbar').clientHeight , el único problema es que estos son no reactivo.

Enfoque CSS: la posición de la barra de navegación es fixed , cuando se oculta, Vuetify le agrega una clase v-app-bar--is-scrolled , por lo que hay algo en lo que podemos engancharnos. Por lo que puedo decir, no parece tener ninguna propiedad. Extrañamente, no puedo entender qué propiedades CSS se usan para ocultar la barra, cuando hago la transición entre estados, veo en las herramientas de desarrollo de Chrome que se agrega la clase mencionada, pero nada cambia en las propiedades calculadas.

¿Alguna idea inteligente? (Intentaré encontrar un jsFiddle o algo así, pero no me queda tiempo en este momento)