iOS Safari中Fixed Header回弹时消失的问题求解

看了你的动图和代码，问题很明确——导航菜单现在用了fixed定位，导致它跟着视口走，而不是固定在导航栏里。咱们来调整一下：

当前效果 #

预期效果 #

修改步骤 #

1. 给父容器#topNav添加position: relative，这样子元素的绝对定位会以它为参照基准；
2. 把#topNavMenu的position: fixed改成position: absolute，同时调整right值让菜单显示在导航栏可见区域内。

修改后的代码 #

#topNav {
  height: 50px;
  margin: 0 auto;
  background-color: #263238;
  color: white;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 5;
  position: relative; /* 新增：为子元素提供定位基准 */
}

#topNavMenu {
  position: absolute; /* 替换fixed为absolute */
  right: 20px; /* 调整为正数，让菜单显示在导航栏右侧 */
  top: 7px;
}

原理说明 #

• fixed定位是相对于浏览器视口的，所以滚动页面时菜单会固定在视口右侧，脱离了导航栏的范围；
• 当父元素设置position: relative后，子元素的absolute定位会相对于父元素的边界来计算位置，这样菜单就会一直依附在导航栏的右上角，跟着导航栏一起固定在页面顶部啦。

内容的提问来源于stack exchange，提问作者Cameron Gilbert