如何使用“固定”项创建列表

时间:2012-02-02 00:44:30

标签: javascript css

我需要一种特殊的模板列表。 它不是一个'列表框' - 更像是Facebook中的列表,它只是在添加项目时不断扩展。 这个谜题的神奇之处在于 - 列表中的任何项目都可以“固定”。一旦固定,无论在列表顶部添加了多少新项目 - 或者用户将垂直页面滚动条移动到的位置,固定项目将永远不会从屏幕底部滚动(但它可以从顶部消失)

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

如何为一个项目列表(可能是div)编写CSS / javascript,其中任何给定的项目可以以这种方式“浮动”在其他项目之上?

1 个答案:

答案 0 :(得分:1)

一旦项目被“固定”,您可能希望将其移动到单独的div中,以便在视口底部使用position: fixed固定项目。

以下是一个例子:

http://jsfiddle.net/SG5M3/2/