移动端打开导航菜单时Overlay元素偏移问题求助

1. 锁定body滚动条避免宽度跳动 #

当Overlay弹出时，body滚动条消失会导致页面宽度变化，进而带动顶部元素偏移。可以在Overlay激活时给body添加固定状态：

/* 自定义CSS */
body.overlay-active {
  overflow: hidden;
  width: 100%;
  position: fixed;
}

在JS中同步切换body类名：

document.querySelector('.hamburger-btn').addEventListener('click', function() {
  const overlay = document.querySelector('.overlay');
  overlay.classList.toggle('active');
  document.body.classList.toggle('overlay-active');
});

2. 固定Overlay头部元素定位 #

给Overlay内的Logo和按钮容器设置固定定位，避免状态切换时布局重排：

.overlay-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px; /* 匹配你的头部高度 */
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1001;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  padding-top: 70px; /* 与header高度一致，避免内容遮挡 */
  display: none;
}

.overlay.active {
  display: block;
}

3. 清除Bootstrap默认样式冲突 #

Bootstrap导航组件自带的margin、padding或过渡效果可能引发偏移，重置相关样式：

.overlay .navbar-brand,
.overlay .navbar-toggler {
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  padding: initial;
}

4. 调整动画过渡属性 #

避免使用height、margin等影响布局的属性做动画，改用opacity或transform：

/* 错误写法（会导致布局偏移） */
/* .overlay {
  height: 0;
  transition: height 0.3s ease;
}
.overlay.active {
  height: 100vh;
} */

/* 正确写法 */
.overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

5. 强制元素尺寸固定 #

给Logo和按钮设置固定宽高，避免状态切换时尺寸变化：

.overlay .navbar-brand {
  width: 200px; /* 你的Logo实际宽度 */
  height: 50px; /* 你的Logo实际高度 */
  display: flex;
  align-items: center;
}

.overlay .navbar-toggler {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者Penelope Atkinson