如何使 Vuetify.js "scroll off screen" 工具栏工作？

Question

我正在尝试将“滚出屏幕”行为添加到工具栏

代码如下：

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-toolbar
      absolute
      color="teal lighten-3"
      dark
      scroll-off-screen
    >
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title>Title</v-toolbar-title>
    </v-toolbar>
      <div style="height:1500px"></div>
    </v-content>
  </v-app>
</div>

在 example page 上面写着：

for this example there is special markup that will not be required in your application.

但我究竟不需要什么？我如何使这段代码起作用？

Answer 1

您需要在 v-toolbar 组件上添加 fixed 和 app 道具（移除 absolute 道具）

Answer 2

您应该添加工具栏属性：scroll-threshold="1" scroll-off-screen="true"

如何使 Vuetify.js "scroll off screen" 工具栏工作？

How do I make the Vuetify.js "scroll off screen" toolbar work?

vuetify.js

代码如下：