Vuetify 置顶工具栏答案

【问题标题】：Vuetify sticky header toolbarVuetify 置顶工具栏
【发布时间】：2019-09-08 10:08:21
【问题描述】：

我使用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>

【问题讨论】：

How to set up toolbar to be fixed in vuetify?的可能重复

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

编辑：Vuetify 1.5 版：

您只需将fixed 添加到您的v-toolbar 即可固定位置，所以：

<v-toolbar dense fixed>

您可以查看文档here

2.0.0 版

Change from vuetify version 1.5：

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

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

【讨论】：

看起来fixed 不再是v-toolbar 的道具。
@JohanBaaij 感谢您指出这一点。我刚刚也根据版本 2 更新了我的答案
在对话框中似乎无法正常工作。当您说固定时，工具栏会在顶部全屏显示。

【解决方案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>

【讨论】：

【解决方案3】：

对于那些只想在上方或下方添加粘性元素的人，您可能想尝试小吃店

 <v-snackbar v-model="snackbar" timeout="-1" top app>
  jojojojojo asdfjasldf 
 </v-snackbar>

【讨论】：