Vuetify粘性标题工具栏

esbemjvw 于 2023-10-23 发布在 Vue.js

关注(0)|答案(4)|浏览(131)

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

vue.js

来源：https://stackoverflow.com/questions/55739783/vuetify-sticky-header-toolbar

4条答案

按热度按时间

ma8fv8wu1#

编辑：Vuetify 1.5版：

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

<v-toolbar dense fixed>

您可以查看文档here

版本2.0.0

vuetify 1.5版的变化：
v-app-bar：全新的组件，用于更好地扩展v-toolbar的功能。所有现有的滚动技术和应用程序功能的v工具栏已被移动。新的滚动技术，如折叠栏，滚动收缩和更多的已添加。
<v-app-bar fixed>将修复工具栏。文件

赞(0）回复(0）举报 2023-10-23

8iwquhpp2#

试试这个代码。

<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>

赞(0）回复(0）举报 2023-10-23

zlwx9yxi3#

对于那些只想在上面或下面有一个粘性元素的人来说，你可能想试试snackbars

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

赞(0）回复(0）举报 2023-10-23

p8ekf7hl4#

如果以上都没有帮助，使用好的旧CSS：

<script>
    <div id="outer">
        <div id="inner" class="d-flex align-center cursor-pointer">
            <v-toolbar dense>
             ...
            </v-toolbar>
        </div>
    </div>
</script>

<style lang="scss" scoped>
#outer {
    border: 1px solid #fff;
}

#inner {
    border: 1px solid #ccc;
    width: 100%;
    height: 64px;
    background-color: #fff;
    position: fixed;
    top: 140px;
    left: 1em;
    padding-left: 16px;
    z-index: 99999;
}
</style>

资料来源：

赞(0）回复(0）举报 2023-10-23

我来回答

Vuetify粘性标题工具栏

4条答案

相关问题

热门标签

最新问答