Javascript 如何使用'；钉住'；项目

我需要一个特殊的模板列表。 它不是一个“列表框”——更像是facebook上的一个列表，它只是随着项目的添加而不断垂直扩展。 谜题的神奇之处在于——列表中的任何项目都可以“固定”。锁定后，无论有多少新项目添加到列表顶部，或者用户将垂直页面滚动条移动到何处，锁定的项目将永远不会从屏幕底部滚动（但它可以从顶部消失）

这可以被比作Excels“冻结顶行”，但它可以应用于任何行，它们堆叠在列表的底部而不是顶部，并且冻结/浮动在项目即将滚动出屏幕之前不会生效

如果任何给定的项都可以以这种方式“浮动”在其他项之上，那么如何为项列表（可能是div）编写CSS/javascript呢？

一旦一个项被“固定”，您可能希望将其移动到一个单独的

div

中，用于固定在视口底部的

位置：fixed

下面是一个例子：