Question

我是Vuetify的新手（有史以来第一个项目），我想在立式便签顶部设置卡片。不幸的是没有按预期工作。我还尝试过使用vue-sticky-directive中的v-scroll指令，结果仍然相同。

这是简化的代码段：

<v-row>
   <v-col class="sticky-container">
     <v-card class="sticky-card">This should be sticky top 90px</v-card>
   </v-col>
   <v-col>
     content
   </v-col>
</v-row>

.sticky-container{
  overflow-y: auto;
}

.sticky-card{
  position: sticky;
  top:90px;
  align-self: start;
}

我知道我可以使用position：fixed获得类似的结果，但是行为有所不同，最终结果不是我要寻找的结果。

有人已经遇到了这个问题并且有一些见解可以与我分享吗？

Answer 1

要实现此目的，您需要将position设置为fixed。由于固定是一种绝对定位，因此您可以通过top: 90px设置最高位置- 并采用固定位置，您将失去该卡片的所有流畅功能以及对中功能。例如max-width无法正常工作，因此您必须改用width并自行居中。

<div id="app">
  <v-app id="inspire">
    <v-row>
     <v-col cols="12">
       <v-card 
         class="mx-auto sticky-card"
         max-width="344"
         color="primary"
         >
         <v-card-text>
           <b>This should be sticky top 90px</b>
         </v-card-text>
       </v-card>
     </v-col>
     <v-col>
        <v-card 
         class="mx-auto after-sticky"
         max-width="344"
         >
         <v-card-text>
           Card with much content - past large text inside of it         
         </v-card-text>
       </v-card>
     </v-col>
  </v-row>
  </v-app>
</div>

CSS：

.sticky-card {
  width: 344px;
  position: fixed;
  top: 90px;
  z-index: 1;
  /* centering */
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);  
}

.after-sticky {
  margin-top: 90px;
}

Answer 2

这对我有用（pug 语法）：

v-row(no-gutters)
  v-col(sm='0' md='0' lg='1')
    div(position: -webkit-sticky; position: sticky; top: 100px')

Vuetify-如何制作粘性元素？

2 个答案: