如何在移动浏览器中启用CSS位置：粘性？

Question

向我的网页添加了一些

position: sticky

属性。在桌面浏览器上工作正常，但在移动设备上却很糟糕。

Answer 1

Chrome 和 iOS 版 Safari 的

sticky

属性需要首先通过

-webkit

供应商进行设置：

.element {
  position: -webkit-sticky;
  position: sticky;
}

您可以在canIUse

中检查浏览器兼容性

Answer 2

如果您向页面添加任何固定位置元素，则粘性位置元素的错误就会消失。

固定位置元素会以某种方式触发某种形式的跟踪，而这种跟踪可能也应该由粘性位置元素触发 - 因此只需使用

position: fixed

添加一个空元素即可解决问题。

<div style="position: fixed;"/>