如何在 HTML 中制作一个顶部有粘性项目的停靠列表？

Question

我正在使用 Vue/Vuetify 构建单页 Web 应用程序。在我的一个视图中，我试图在页面右侧创建一个项目列表（v-list）。该列表可能比页面高度长，因此需要滚动。但是，页面的其余部分不应滚动。

我已经成功构建了第一部分。问题是我希望能够将项目停靠在列表顶部的不可滚动区域中，以便可滚动区域变小。

在 javascript 中是否可以不重新计算可滚动区域的高度？

我同时使用 flex box 和 grid box，但在做现代方面不是很有经验 HTML。

Answer 1

肯定用position: sticky。只需确保将粘性元素定位为 top CSS 属性（或底部、左侧、右侧，在其他情况下）并且粘性元素是滚动的直接子元素非常重要元素！

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>

如何在 HTML 中制作一个顶部有粘性项目的停靠列表？

How to make a docked list with sticky items on top in HTML?

html

css

vue.js

flexbox

grid-layout