1

I am trying to add v-toolbar for a page, where I want the toolbar to appear on screen even on scrolling. I tried using scroll-off-screen, it does show the toolbar on scrolling but when I am on top of the page the toolbar disappears. I want the toolbar to show all the time even when I am on top of the page or I am scrolling. I am using Vuetify version 1.0.5.

<template> 
  <div>
    <v-toolbar dense fixed class="main-toolbar" scroll-off-screen>
      <v-layout row wrap>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section1').scrollIntoView(true);">Section 1</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section2').scrollIntoView(true);">Section 2</a></v-toolbar-title>
        </v-flex>
        <v-flex xs12 md4 class="sub-main-page">
          <v-toolbar-title><a class="toolbar-styling" href="javascript:document.getElementById('section3').scrollIntoView(true);">Section 3</a></v-toolbar-title>
        </v-flex>
      </v-layout>
    </v-toolbar>
    <div id="section1">
     <Section1></Section1>
    </div>
    <div id="section1">
     <Section2></Section2>
    </div>
    <div id="section1">
     <Section3></Section3>
    </div>
  </div>    
</template>

<script>
import Section1 from 'views/section1.vue';
import Section2 from 'views/section2.vue';
import Section3 from 'views/section3.vue';

export default {
  components: {
    Section1,
    Section2,
    Section3,
  }
};
</script>
tony19
  • 125,647
  • 18
  • 229
  • 307
user12763413
  • 1,177
  • 3
  • 18
  • 53

1 Answers1

-1

The fixed and scroll-off-screen props are not intended for v-toolbar. Rather you should use those props with v-app-bar instead of v-toolbar, since the latter is deprecated in 2.x.

To keep the toolbar fixed at the top of the page:

<v-app-bar fixed>

demo

tony19
  • 125,647
  • 18
  • 229
  • 307