四年前，Eric Bidelman 撰写了一篇非常棒的博文，介绍了 position: sticky 在 WebKit 中发布的事实。WebKit 当时是 Chrome（以及包括 Safari 在内的许多其他浏览器）的引擎。一年后，我们从 Chrome 中移除了 position:sticky，这让 Web 开发者大为失望，因为“当前实现的设计无法与现有的滚动和合成系统很好地集成”。
正如该 bug 所述，我们一直希望将其重新引入 Chrome：“在滚动和合成工作顺利完成后，我们应返回 position:
sticky，并以与引擎的其余部分良好集成的方式实现该功能”。自 2013 年起，我们一直在跟踪实现元代码 bug。
好消息是，从 Chrome 56（截至 2016 年 12 月为 Beta 版，2017 年 1 月为稳定版）开始，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> 元素固定在视口顶部 10 像素处。如需将其直接固定在视口顶部，您可以将 top 属性设置为 top: 0px。
对此功能的支持非常强大。它适用于 Chrome（太棒了）、Firefox 和 Safari。以下是有关 position:sticky 的更多详情：