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

Question

I'm looking for a way to make the <v-stepper-header> component sticky on scroll.

I've tried to create custom CSS but didn't succeed.

Here's a sample code.

<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

You have to remove overflow: hidden from v-stepper class.

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

and

.stepper {
  overflow: visible;
}

Working example here.

But why? From MDN about 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.

and useful article Position: stuck; — and a way to fix it.