How to create sticky header on page?



  • I’ve got a qpage inside a qlayout. On this qpage I’d like to have a sticky menu that covers the width of the qpage. I can do this with a qtoolbar, but I haven’t figured out how to make it sticky. If I use qpagesticky then it just becomes overlaid over the content and what I’m looking for is reducing the qpage size.

    So question is, how do I create the green element C in the example below?

    1d96085e-a427-45de-8ebf-fdcebd09e527-image.png

    I’ve been searching here about making qtoolbar sticky or nesting layouts, but haven’t been able to figure out how to accomplish this yet. Any ideas here?



  • Does this do what you are looking for?

    https://quasar.dev/layout/page-sticky#Example--Expanded

    Scott



  • Thanks for your idea! I tried it before but didn’t add padding. Now when I added padding for the content, it worked.

    However, expanded page-sticky doesn’t work with qsplitter, it expands over the split area. (i.e. into both ther before and after slots of qplitter). Any ideas on how that could be solved?



  • What is it that you are trying to “lay out”?

    Scott



  • I’m trying to make the border between C/D and B draggable and am experiementing with qsplitter instead of qdrawer. It seems to be working except for this toolbar issue. However I managed to “solve” it in a hacky way, where the width of the qsticky is computed to be the same as the qsplitter-value. There ought to be a more elegant solution though:

    <q-splitter v-model="splitterModel" :limits="[50, 100]">
       <template v-slot:before>
         <pageComponent/>
         <q-page-sticky expand position="top" :style="toolBarWidth">
           <q-toolbar class="bg-accent text-white">
             <q-toolbar-title>Page Title</q-toolbar-title>
           </q-toolbar>
         </q-page-sticky>
       </template>
       <template v-slot:after>
         <sidebarComponent />
       </template>
     </q-splitter>
    </div>
    </template>
    
    
    <script>
    export default {
    computed: {
     toolBarWidth() {
       return "width:" + this.splitterModel + "%";
     }
    },
    data() {
     return {
       splitterModel: 75
     };
    }
    


  • I would have thought 100% width for the sticky header would have worked.

    Scott


Log in to reply