VuetifyJS：如何使 v-stepper-header 粘在滚动条上

Question

我正在寻找一种使 <v-stepper-header> 组件粘在滚动条上的方法。

我尝试创建自定义 CSS 但没有成功。

这是示例代码。

<v-stepper v-model="step">
    <v-stepper-header class="sticky">
        <v-stepper-step
            step="1"
        >
            Step 1
        </v-stepper-step>
</v-stepper>

.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

Answer 1

您必须从 v-stepper class 中删除 overflow: hidden。

<v-stepper class="stepper">
 ...
</v-stepper>

和

.stepper {
  overflow: visible;
}

工作示例here。

但是为什么呢？来自 MDN 关于 position

Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.

和有用的文章 Position: stuck; — and a way to fix it。

VuetifyJS：如何使 v-stepper-header 粘在滚动条上

VuetifyJS: How to make v-stepper-header sticky on scroll

javascript

vue.js

vuetify.js

v-stepper