location:sticky 现已在 Chrome 中推出

四年前,Eric Bidelman 撰写了一篇相当精彩的博文,介绍了 position: sticky 登陆 WebKit,当时 WebKit 是为 Chrome(以及包括 Safari 在内的许多其他浏览器)提供支持的引擎。一年后,令 Web 开发者感到高兴的是,我们从 Chrome 中移除了 position:sticky,因为“当前的实现未采用与现有滚动和合成系统完美集成的方式”。

我们一直希望将其重新放回到 Chrome 中,正如 bug 所说:“一旦我们准备好了按顺序排列的滚动和合成屋,就应该返回 position: sticky,并以能与引擎其余部分完美集成的方式实现该功能”。自 2013 年起,我们就一直致力于解决跟踪实现的元 bug

好消息是,自 Chrome 56 起(目前为 Beta 版,截至 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的更多详情: