Javascript 如何将列表/网格行呈现为粘性行？

我有一个组件，它使用了

react virtualized

的

List

进行虚拟化滚动，其中每一行要么是类别标题，要么是属于该类别的实际内容。比如：

Fruits
- Strawberry
- Blueberry
- Mango
- ...etc
Grains
- Oats
- Wheat
- Rice
- ...etc

（其中

水果

和

谷物

为类别标题）

当用户滚动时，如果他们滚动过一个类别标题，我希望能够从该行获取数据，并将其呈现在一个“粘性”（引号中，因为

position:sticky

实际上还不是一个可行的选项）容器中，粘贴在滚动容器的顶部，直到他们滚动过下一个类别标题，依此类推。（基本上，与在iOS音乐应用程序中滚动艺术家的工作方式相同。）

棘手的是，我希望这个粘性标题仍然在滚动容器内，而不是覆盖它或位于它上面，它需要填充其父容器的宽度，这就排除了在

列表

组件之外呈现一个粘性容器，然后将其覆盖在

位置：绝对

的顶部

据我所知，现在使用

react virtualized

似乎不太可能这样做-因为所有行都是绝对定位的，所以无法在滚动容器中创建“粘性”行。绝对定位粘滞标题是可行的，但前提是所有其他行都静态定位在正常文档流中

现在是否可以通过

react虚拟化

实现像粘性头这样的功能？如果不是，如何使

react虚拟化

支持它们

---

谢谢

我们对您也有类似的要求-我们需要一个列表，其中包含对粘性标题的支持。我们无法用react虚拟化列表/网格实现这一点，所以我创建了一个支持粘性标题的列表

它只渲染显示可见列表和任何父节点所需的内容，以便它们保持“粘性”。然后，将从DOM中删除任何未固定的父对象。请注意，它还支持嵌套的粘性级别

参见示例

---

（免责声明：我是作者）

Hi@wisew。根据我的知识，你所描述的不可能是虚拟的。我对

position:sticky

的有限实验让我相信它是性能杀手（在这种情况下，

ScrollSync

是否有用？虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能无效。-添加了有关此的额外信息，以提供非仅链接的答案。