I have a Vuetify v-app-bar, which is set to hide-on-scroll

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

I also have v-tabs, which I want to "sticky" position below it:

    <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>

CSS sticky class:

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

This works, in principle. When scrolling down, the app-bar disappears and the tabs stick to the top of the screen. Nice.

However, since the v-app-bar is set to hide-on-scroll (which I'd really like to keep that way), meaning that it hides when scrolling down, and re-appears when scrolling up.

The problem is that it positions itself on top of the v-app-bar when re-appearing. How can I position the v-tabs always below the hiding/reappearing v-app-bar?

I have a few approaches in mind, but so-far all have failed:

Js/Vue approach: If only I could know if the v-app-bar is in hiding, or if it's visible I could add the 48px to the top of the sticky. V-app-bar does not emit any event when appearing/hiding, but I can read the components height from this.$refs.navbar.computedContentHeight, or from document.getElementById('navbar').clientHeight, only problem is these are not reactive.

CSS approach: The position of the navbar is fixed, when it goes into hiding Vuetify adds a class to it v-app-bar--is-scrolled, so there's something we may be able to latch on. As far as I can tell it doesn't seem to have any properties. Strangely, I cannot figure out what CSS properties are used to hide the bar, when I transition between states I see in Chrome dev-tools that the mentioned class is added, but nothing changes in the calculated properties.

Any smart idea's? (I will try to come up with a jsFiddle or something, but have no time left at this moment)