滾動時始終在頂部的高表單元格中顯示文本

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>