Bootstrap 5.2汉堡菜单在iPhone滚动时跳动问题求助

iPhone上的Safari（包括iOS版Chrome，因采用WebKit内核）在页面滚动时会自动隐藏/显示顶部地址栏，这会动态改变window.innerHeight（视口高度）。你使用的Bootstrap top-50类基于视口高度的50%设置元素top值，当视口高度变化时，浏览器会重新计算菜单位置，导致滚动时出现跳动。而Android Chrome的地址栏仅会滚动缩小，不会改变视口高度，因此菜单位置保持稳定。

方案一：纯CSS固定位置（推荐） #

替换Bootstrap的top-50类，用CSS transform实现垂直居中，避免依赖视口高度的动态变化：

1. 修改HTML导航栏类：

<nav class="navbar bg-light fixed-center-nav">
  <!-- 其余内容保持不变 -->
</nav>

2. 添加自定义CSS：

.fixed-center-nav {
  position: fixed;
  width: 100%;
  top: 50%;
  /* 基于元素自身高度居中，不受视口高度变化影响 */
  transform: translateY(-50%);
  z-index: 1030; /* 和Bootstrap fixed-top的层级一致 */
}

方案二：JS动态校准位置 #

若方案一仍有轻微跳动，可通过JS监听视口变化，实时调整菜单位置：

1. 保留原有HTML，移除top-50类：

<nav class="navbar bg-light fixed-top">
  <!-- 其余内容保持不变 -->
</nav>

2. 添加JavaScript代码：

function adjustNavPosition() {
  const nav = document.querySelector('.navbar');
  if (!nav) return;
  const navHeight = nav.offsetHeight;
  const viewportMidpoint = window.innerHeight / 2;
  // 将菜单定位到视口中点减去自身高度的一半位置
  nav.style.top = `${viewportMidpoint - navHeight / 2}px`;
}

// 初始化位置
adjustNavPosition();

// 监听视口变化（含地址栏显示/隐藏）
window.addEventListener('resize', adjustNavPosition);
// 监听滚动事件（iOS滚动时也会触发视口高度变化）
window.addEventListener('scroll', adjustNavPosition);

方案三：禁用iOS地址栏自动隐藏（可选） #

通过视口元标签禁用地址栏自动隐藏，但会影响用户浏览体验，谨慎使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">

内容的提问来源于stack exchange，提问作者Pavlo Kravchuk