Vuetify sticky header toolbar

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