I am currently working on implementing a v-toolbar for a page, with the requirement that the toolbar remains visible on the screen at all times, even when scrolling. I have tried using 'scroll-off-screen', which does keep the toolbar visible while scrolling, but it disappears when I reach the top of the page. I need the toolbar to be consistently displayed, regardless of my position on the page. My Vueitfy version is 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>