[Vuejs]-How to make a docked list with sticky items on top in HTML?

by

4👍

✅

Definitely use position: sticky. Just be sure to position the sticky element with top CSS property (or bottom, left, right, in other situations) and it’s very important that the sticky elements are direct children of the scrolling element!

ol {
  height: 200px;
  overflow-y: auto;
  position: relative;
}

li {
  padding: .5em 0;
}

.stickme {
  top: 0;
  position: sticky;
  background: lightgreen;
}
<ol>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li class="stickme">I'm sticky</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
  <li>I'm normal</li>
</ol>
👤Luca Faggianelli

Leave a comment