滚动时始终在顶部的高表单元格中显示文本

Question

在我的项目中，我有一张桌子。 在最左边的列中显示组； 在右边的细节。 有时一个组中可能有许多条目，因此该组可能无法完全显示在屏幕上。 由于左栏中的文本显示在顶部，因此滚动时 label 可能会消失。

我为您添加了示例图片。 红色区域代表视口。 如果向下滚动，组 1应该保持可见，直到用户进一步向下滚动。

有没有办法使用 CSS 或 JavaScript 将文本固定到屏幕顶部，只要单元格仍在视口中，它就会在滚动时保持在顶部？

Answer 1

我找到了解决方案。 首先，您必须将组标签放入 '' 元素中。 然后添加引导程序的'sticky-top' class，或以下属性：

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

一个例子是：

<table>
  <tr>
    <th rowspan="2">
      <span class="sticky-top">Group</span>
    </th>
    <td>Detail</td>
  </tr>
  <tr>
    <td>Detail</td>
  </tr>
</table>

Answer 2

使用“位置：粘性；” 可以帮助你，我猜。

 div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; }

 <div> <div class="sticky">Im sticky!</div> </div>