javascript - Vuetify 应用栏位于内容下方。我如何解决它？

Question

我正在使用 Vuetify.js。

当我向下滚动时，内容覆盖了应用栏。

我认为简单地设置 z-index 会导致很多问题。

example codepen

我的应用程序结构(伪)

<v-app>
  <v-app-bar app absolute shrink-on-scroll prominent scroll-target"#a">
  <v-sheet id="a" overflow-y-auto>
    <v-content>
      <keep-alive>
        <router-view>
          ..
            <v-container>
              <v-col>
                <v-expansion-panels>
                  ...
          ..

  <v-footer>

Answer 1

只需从 v-app-bar 组件中删除 absolute 属性即可:

<v-app>
  <v-app-bar app  shrink-on-scroll prominent scroll-target"#a">
  <v-sheet id="a" overflow-y-auto>

检查这个pen