The Header is using Vuetify <v-app-bar> But I need to make the filter column fixed while scrolling prodcuts.

<template>
   <v-container fluid>
      <v-col>
        <v-col style="position: sticky; z-index:2; position: -webkit-sticky; top:0; position:fixed;">...</v-col>
      </v-col>
   </v-container>
</template>

Browser: Chrome

Additional info: https://uxdesign.cc/position-stuck-96c9f55d9526

I've read this article but still couldn't figure it out.

CodePudding user response：

Vuetify 2.6 has a banner component that has a sticky attribute e.g.

<v-banner single-line sticky>Content here</v-banner>

But this might not be a suitable component for you... I don't know what content you want in there for example...

But otherwise it should be pretty simple to 'build your own'. Have a look at the docs on MDN here for further explanation. But essentially it's as simple as the following HTML/CSS taken verbatim from MDN:

* {
  box-sizing: border-box;
}

dl > div {
  background: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd   dd {
  border-top: 1px solid #ccc;
}

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>