Vuetify 粘性标题工具栏

Question

我使用 v-toolbar 但是当我向下滚动时它消失了。基本上我想要一个粘性标题。

这基本上是我的代码。

 <div id="app">
  <v-app>
    <v-toolbar dense>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
   <main>
     <h1 v-for="n in 20" :key="n">{{n}}</h1>
    </main>
  </v-app>
</div>

原文由 margherita pizza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑：Vuetify 版本 1.5：

你只需要添加 fixed 到你的 v-toolbar 固定位置，所以：

 <v-toolbar dense fixed>

您可以在 此处 查看文档

版本 2.0.0

从 vuetify 版本 1.5 更改：

v-app-bar：创建的全新组件以更好地限定 v-toolbar 的功能。 v-toolbar 中的所有现有滚动技术和应用程序功能都已移动。添加了新的滚动技术，例如折叠栏、滚动收缩等。

<v-app-bar fixed> 将修复工具栏。 文档

原文由 DjSh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试这段代码。

 <v-app id="inspire">
    <div
      class="hide-overflow"
      style="position: relative;"
    >
      <v-toolbar
        color="teal lighten-3"
        dark
        scroll-off-screen
        scroll-target="#scrolling-techniques"
        dense
      >
        <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
      </v-toolbar>

      <main id="scrolling-techniques" class="scroll-y"
            style="max-height: 625px;">
     <h1 v-for="n in 20" :key="n">{{n}}</h1>
    </main>
    </div>
  </v-app>

原文由 Patel Pratik 发布，翻译遵循 CC BY-SA 4.0 许可协议