汉堡菜单(Burger Menu)导致页面滚动异常的解决方案咨询

1. 重构DOM结构，解绑菜单与header的嵌套关系 #

把汉堡菜单的下拉内容抽出来，放到一个独立容器里，别嵌套在header内部。这样header能一直保持固定高度（比如10vh），菜单容器单独控制显示/隐藏和全屏高度，彻底避免header占满视口影响页面滚动。

调整后结构示例：

<!-- 原嵌套结构 -->
<header class="mobile-header">
  <button class="hamburger">☰</button>
  <nav class="menu-content">...</nav>
</header>

<!-- 优化后结构 -->
<header class="mobile-header">
  <button class="hamburger">☰</button>
</header>
<div class="mobile-menu-overlay">
  <nav class="menu-content">...</nav>
</div>

2. CSS分层控制容器状态 #

• 给mobile-header固定10vh高度，始终保持这个尺寸，防止激活状态下高度变化搞乱点击区域。
• 让mobile-menu-overlay默认隐藏，激活时设置固定定位覆盖整个视口，加过渡动画实现下拉/覆盖效果。
• 菜单内容要避开header高度，防止被遮挡。

CSS示例：

.mobile-header {
  height: 10vh;
  position: relative;
  z-index: 100; /* 让汉堡按钮始终在最上层 */
}

.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  z-index: 99;
  background: #fff; /* 按需设置背景色 */
}

.mobile-menu-overlay.active {
  height: 100vh;
}

.menu-content {
  padding: 12vh 2rem 2rem; /* 避开header的10vh高度，留2vh缓冲 */
}

3. 调整JS逻辑，切换独立容器的状态 #

菜单容器移出来后，JS里把激活状态的切换绑定到mobile-menu-overlay，而不是header本身。这样点击汉堡按钮时，只改overlay的显示状态，header高度不变，点击事件不会失效。

JS示例：

const hamburger = document.querySelector('.hamburger');
const menuOverlay = document.querySelector('.mobile-menu-overlay');

hamburger.addEventListener('click', () => {
  menuOverlay.classList.toggle('active');
  // 可选：菜单展开时锁定页面滚动，关闭后恢复
  document.body.style.overflow = menuOverlay.classList.contains('active') ? 'hidden' : 'auto';
});

4. 解决CodePen JS在Cargo失效的问题 #

Cargo平台对DOM加载时机有要求，把JS代码放到DOMContentLoaded事件监听里，或者给脚本标签加defer属性，确保DOM完全加载后再执行逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 这里放你的菜单控制代码
});

或者脚本标签写法：

<script src="your-script.js" defer></script>

这么调整后，菜单展开时是独立的全屏overlay，header保持固定高度，既保证菜单完整显示，又不影响页面滚动，同时点击事件不会因为元素尺寸变化失效。

内容的提问来源于stack exchange，提问作者Andreas Vold