移动端Chrome中position:sticky底部元素滚动跳动问题咨询

问题本质 #

这是安卓移动端Chrome的已知兼容性bug，并非CSS规范定义的预期行为。原因是Chrome顶部导航栏隐藏/显示时会动态改变视口高度，但position: sticky元素的定位逻辑没有同步响应这个视口尺寸变化，导致元素位置计算错误，出现向上跳动的情况。

无需JavaScript的解决方案 #

可以通过以下两种CSS方案修复：

方案1：使用动态视口单位 dvh #

给页面根元素设置基于动态视口的高度，确保容器能实时响应视口变化：

html, body {
  height: 100dvh;
  margin: 0;
  overflow-x: hidden;
}

.sticky-footer {
  position: sticky;
  bottom: 0;
  background-color: red;
}

dvh单位会实时匹配当前可见视口的高度（导航栏隐藏/显示时自动更新），让sticky元素的定位计算能跟随视口变化同步调整。

方案2：替换为 position: fixed（适用于始终固定底部的场景） #

如果需求是元素始终固定在页面底部，而非滚动到特定位置才固定，可直接使用fixed定位，它会始终基于当前视口定位：

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
}

注意：这种方式下元素会一直固定在底部，不会随内容滚动脱离，适合全局底部栏场景。

内容的提问来源于stack exchange，提问作者Hans Lehnert