如何使v-stepper步骤始终在页面顶部可见？

Question

在使用Vuetify.js框架的Nuxt.js应用程序中，我有一个v-stepper组件，当向下滚动任何页面时，它的步骤其步骤都不可见（我将stepper组件放入了其中 pages / 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%;
   }

Answer 2

.v-stepper__wrapper {
    height: auto !important;
}