使用 CSS Grid 和 Position Sticky

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。从 200 美元的免费信用额度 开始!

假设您有一个两列 CSS 网格,您希望其中一列的行为类似于 position: sticky;。没有什么能阻止您这样做。但是,这两列的默认高度将是“两列中最高内容的高度”,因为网格列的默认行为是 align-items: stretch;。因此,即使您在想要表现为粘性的列中具有非常“短”的内容,它也不会看起来移动,因为它实际上已经与另一列一样高。

Ahmad Shadeed 指出,如果您希望它正常工作,您可能需要将想要表现为粘性的列的 align-items: start; 设置为开始。

我想补充一点,如果您想要position: sticky; 行为适用于两列中任何一个的内部元素,那么您实际上需要保留默认的拉伸行为。这是一个分叉示例,说明我的意思