四年前，埃里克·比德尔曼 (Eric Bidelman) 撰写了一篇博文，讲述了一个关于
position: sticky 在 WebKit 中实现，
那时，Chrome（以及其他许多
包括 Safari）。一年后，网络大受欢迎
我们从 Chrome 中移除了 position:sticky，
当前实施的设计方式未与
现有的滚动和合成系统”。
我们一直希望能在 Chrome 中恢复它，正如该错误所述：“
按顺序完成滚动和合成，我们应该返回 position:
sticky，并以与其余部分完美集成的方式实现该功能。
引擎”。元错误跟踪
自 2013 年以来一直致力于实现这一点。
好消息是，从 Chrome 56（目前为测试版 2016 年 12 月）开始，
稳定版）position: sticky 现已在 Chrome 中恢复使用。
什么是 position:sticky？
需要花点时间，我为什么对它如此兴奋？
position:sticky 是 CSS 定位属性，可用于修正
元素到视口（即，将其锚定到屏幕顶部）
但仅当其父级在视口中可见且位于
阈值。当元素未固定在视口上时，其行为方式
温度为 position: relative。它是为
无需在 onscroll 事件处理脚本中使用 JavaScript 的平台
只需将某个元素锁定在视口顶部即可
这是我的博客上显示的内容。它允许我 将当前章节的标题置于屏幕顶端 而不是冗长而又费力的文章：\
如需实现此功能，请指定 position 属性
应为您希望被卡住的元素设置 sticky 值。
此外，您还可以在需要卡住的位置添加偏移量。
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
上面的示例将 <h3> 元素固定在距离顶部 10px 处
视口。要直接将其固定在视口顶部，您应将
将 top 属性设为 top: 0px。
我们非常支持此功能。可以在 Chrome 中使用（耶！）
Firefox 和 Safari。以下是有关 position:sticky 的详细信息：