Vuetify sticky header toolbar - vue.js

Question

I use v-toolbar but when I scroll down it get disappears. Basically I want to a sticky header.
This is my code basically.
<div id="app">
<v-app>
<v-toolbar dense>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</v-app>
</div>

Answer 1

Edit: Vuetify version 1.5:
You just need to add fixed to your v-toolbar which fixes the position, So:
<v-toolbar dense fixed>
You can see the documentation here
Version 2.0.0
Change from vuetify version 1.5 :
v-app-bar: Brand new component that was created to better scope the functionality of v-toolbar. All existing scrolling techniques and app functionality from v-toolbar has been moved. New scrolling techniques such as collapsing bar, scroll shrink and more have been added.
<v-app-bar fixed> would fix the toolbar. Documentation

Answer 2

Try this code.
<v-app id="inspire">
<div
class="hide-overflow"
style="position: relative;"
>
<v-toolbar
color="teal lighten-3"
dark
scroll-off-screen
scroll-target="#scrolling-techniques"
dense
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main id="scrolling-techniques" class="scroll-y"
style="max-height: 625px;">
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</div>
</v-app>

Answer 3

For those who just wants to have a sticky element either above or below,
you might want to try snackbars
<v-snackbar v-model="snackbar" timeout="-1" top app>
jojojojojo asdfjasldf
</v-snackbar>