javascript - Make v-menu Title stay fixed on top - Stack Overflow

admin管理员组

文章数量:1391999

So I am trying to do a Notification ponent in my VueJS App, but I'm struggling to get the header of a menu that opens on click fixed.

Here is the code of the ponent:

<template>
 <v-menu
  max-width="400px"
  max-height="300px"
  allow-overflow
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>

  <v-card>
    <v-list>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title style="position:fixed;" class="text-center"
            >This Should Be Fixed</v-list-item-title
          >
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
    </v-list>
    <v-btn text @click="menu = false">Cancel</v-btn>
    <v-btn color="primary" text @click="menu = false">Save</v-btn>
  </v-card>
</v-menu>

I have tried the <v-app-bar fixed>Title</v-app-bar> , which doesn't work either. Does anyone have an idea what causes that?

So I am trying to do a Notification ponent in my VueJS App, but I'm struggling to get the header of a menu that opens on click fixed.

Here is the code of the ponent:

<template>
 <v-menu
  max-width="400px"
  max-height="300px"
  allow-overflow
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>

  <v-card>
    <v-list>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title style="position:fixed;" class="text-center"
            >This Should Be Fixed</v-list-item-title
          >
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
      <v-list-item>Message</v-list-item>
    </v-list>
    <v-btn text @click="menu = false">Cancel</v-btn>
    <v-btn color="primary" text @click="menu = false">Save</v-btn>
  </v-card>
</v-menu>

I have tried the <v-app-bar fixed>Title</v-app-bar> , which doesn't work either. Does anyone have an idea what causes that?

• javascript
• css
• vue.js
• vuetify.js

Share Follow edited Apr 25, 2020 at 14:52 Ckuessner asked Apr 24, 2020 at 23:08 CkuessnerCkuessner 7311111 silver badges3434 bronze badges 3

• Can you elaborate on what you would like the interaction to do? – Joel Hager Commented Apr 24, 2020 at 23:11
• The interaction opens a Menu with a fixed height, so it's scrollable. The problem is that the title doesn't stay fixed on top when I'm scrolling... – Ckuessner Commented Apr 24, 2020 at 23:35
• set a class to content-class and apply position: fixed – Arst Commented Sep 1, 2021 at 6:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The trick is to use a v-card for the content of your menu, and set a fixed height and overflow-y: scroll on the content:

<v-menu
  max-width="400px"
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  offset-x
>
  <template v-slot:activator="{ on }">
    <v-icon v-on="on" @click="menu = true">mdi-bell</v-icon>
  </template>
  <v-card scrollable>
    <v-card-title>
      This Should Be Fixed
    </v-card-title>
    <v-card-text style="height: 280px; overflow-y: scroll"> <!--THIS IS IMPORTANT!-->
      <v-list>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
      </v-list>
    </v-card-text>
    <v-card-actions>
      <v-btn text @click="menu = false">Cancel</v-btn>
      <v-btn color="primary" text @click="menu = false">Save</v-btn>
    </v-card-actions>
  </v-card>
</v-menu>

Here's a codepen with a working demo.

It will be better to use max-height in style prop. So your list can have variable height:

    <v-card-text style="max-height: 260px;" class="overflow-y-auto"> <!--THIS IS IMPORTANT!-->
      <v-list>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
        <v-list-item>Message</v-list-item>
      </v-list>
    </v-card-text>

本文标签： javascriptMake vmenu Title stay fixed on topStack Overflow