解决导航栏居中Logo在宽度变化与滚动时的抖动晃动问题

我完全懂你遇到的糟心情况——滚动页面时导航栏宽度变化，中间的Logo跟着晃来晃去，用绝对定位虽然能止抖，但又没法在容器宽度变化时保持居中。这其实是因为动态修改宽度时，Flex布局的空间计算和JS的异步调整产生了冲突，再加上Logo的定位方式没适配好。下面给你一套稳当的解决方案：

核心思路 #

1. 把Logo改成基于容器的绝对居中，脱离Flex布局流，这样不管左右菜单或容器宽度怎么变，Logo都钉在容器正中间，不会被其他元素的布局计算带偏。
2. 用CSS类代替JS直接修改宽度，让CSS引擎处理过渡逻辑，比JS动态设置更顺滑，减少布局抖动。

具体代码修改 #

1. 调整CSS：修复Logo居中与定位

首先修改导航栏和Logo的定位属性，让Logo绝对居中且不受Flex布局影响：

#headerMenu {
  /* 保留原有属性，新增相对定位（让内部绝对定位元素以它为基准） */
  width: 95%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px 0px 20px;
  backdrop-filter: blur(10px) grayscale(1) brightness(0.7);
  height: 50px;
  border-radius: 10px 10px 20px 20px;
  position: sticky;
  top: 10px;
  margin-top: 250px;
  overflow: visible;
  transition: width 1s ease;
  position: relative; /* 新增：作为内部绝对定位元素的基准 */
}

#headerImg {
  border-radius: 20px;
  padding: 10px;
  flex-shrink: 0;
  margin: 0; /* 移除原有margin，避免干扰绝对定位 */
  animation-name: scaleUpDown;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
  animation-duration: 1s;
  /* 新增绝对居中定位，替换原来的transform: translateX(50%) */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2. 优化JS：用CSS类控制宽度变化

把JS直接设置宽度的逻辑改成添加/移除CSS类，让CSS来处理宽度过渡，更稳定：

const stickyElement = document.getElementById('headerMenu');
window.addEventListener('scroll', () => {
  const rect = stickyElement.getBoundingClientRect();
  if (rect.top <= 15) {
    stickyElement.classList.add('sticky-narrow');
  } else {
    stickyElement.classList.remove('sticky-narrow');
  }
});

3. 补充CSS：定义类的宽度规则

在CSS里添加类对应的宽度样式，结合响应式适配：

/* 滚动后的窄宽度样式 */
#headerMenu.sticky-narrow {
  width: 76vw;
}

/* 响应式适配：小屏幕下的宽度规则 */
@media screen and (max-width:800px) {
  #headerMenu {
    width: 80%;
  }
  #headerMenu.sticky-narrow {
    width: 90%;
  }
}

为什么这样能解决问题？ #

• 绝对居中的Logo：通过position: absolute + left:50% + transform: translate(-50%, -50%)，Logo会完全相对于导航栏容器居中，和左右菜单的布局计算彻底脱钩，不会因为Flex的space-between重新分配空间而抖动。
• CSS类控制宽度：用CSS类触发宽度变化，让浏览器的CSS引擎处理过渡动画，比JS异步修改样式更顺滑，避免了JS执行时机和布局重排的冲突。
• 保留原有过渡效果：原有的transition: width 1s ease会继续生效，宽度变化时的动画依然平滑自然。

你可以把这些修改替换到你的代码里试试，应该就能彻底解决Logo抖动的问题，同时保证在任何宽度下Logo都稳稳卡在导航栏正中间~

内容来源于stack exchange