Как сделать так, чтобы шаги v-stepper всегда были видны в верхней части страницы?

Question

В приложении Nuxt.js, использующем фреймворк Vuetify.js, у меня есть компонент v-stepper, который при прокрутке любой страницы вниз делает его шаги невидимыми (я помещаю шаговый компонент внутрь страницы / index.vue ). Я хочу, чтобы они всегда были видны сверху.

Для этой цели, я думаю, только помещение v-stepper внутрь компонента v-toolbar может достичь цели, но не совсем: нетИдея, как открыть компонент v-stepper внутри layouts / default.vue и закрыть его внутри pages / index.vue :

<template>
  <v-app>
    <v-toolbar>
      <!-- open v-stepper here -->
      <v-stepper>
    </v-toolbar>
    <v-content>
      <nuxt /> <!-- closing v-stepper here does not work, -->
    </v-content>
  </v-app>
</template>

Как этого добитьсяЦель?(Я не прошу реализацию, просто подсказка / идея / альтернатива)

Answer 1

оберните ваш v-stepper компонент с div как <div class="sticky"><v-stepper/></div>

и добавьте следующие правила к вашему css:

  .sticky {
     position: fixed;
     top: 0;
     width: 100%;
   }