移动端position: fixed定位异常 顶部栏滚动错位问题

• 固定定位元素未显式指定视口锚点偏移。#topbar仅设置了position: fixed，没有添加top: 0、left: 0属性。该状态下浏览器会先按元素在正常文档流的初始位置渲染，移动端页面滚动时，浏览器地址栏、底部工具栏会动态收起/展开，触发视口尺寸变化，浏览器需要重新计算元素位置，直接导致顶栏跟随页面滚动一段距离后才吸附到顶部。桌面端浏览器视口尺寸不会随滚动发生变化，因此不会出现该异常。
• 移动端顶栏使用百分比高度触发频繁重排。移动端布局下#topbar高度被设为15%，固定定位元素的百分比高度以视口为计算基准，移动端视口高度随滚动动态变化时，浏览器会持续重算顶栏高度，触发不必要的重排，既加重定位延迟，也会导致页面其他元素错位。

• 给#topbar添加top: 0; left: 0;属性，直接将元素锚定到视口左上角，省去浏览器对元素正常流位置的计算逻辑。
• 移除移动端顶栏的百分比高度设置，改用固定像素值（移动端导航栏常规高度区间为48px~64px，可根据设计需求调整），避免视口变化触发的高度重算。
• 固定定位元素会脱离正常文档流，需要给body添加与顶栏高度一致的上内边距，避免首屏内容被顶栏遮挡。

修复后的完整CSS代码如下：

#topbar {
  font-weight: 300;
  background-color: white;
  z-index: 999;
  position: fixed;
  /* 锚定固定定位元素到视口左上角 */
  top: 0;
  left: 0;
  width: 100%;
  /* 移动端使用固定高度，替换原15%百分比设置 */
  height: 56px;
  box-shadow: 0 5px 10px rgba(124, 124, 124, 0.3);
}

/* 添加上内边距，避免页面内容被固定顶栏遮挡 */
body {
  padding-top: 56px;
}

@media (min-width: 35em) {
  #topbar {
    height: 60px;
  }
  /* 桌面端同步调整上内边距 */
  body {
    padding-top: 60px;
  }
}

内容的提问来源于stack exchange，提问作者johnny bumball