如何通过JavaScript调整粘性导航栏，解决与Logo重叠及布局问题？

核心方案：CSS基础布局 + JS动态计算间距 #

先通过CSS让菜单默认靠右，再用JS实时计算Logo的实际占用宽度，给菜单添加动态缓冲间距，彻底避免重叠。

1. 基础HTML结构（示例）

<nav class="sticky-nav">
  <div class="logo">Sticky Logo</div>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

2. CSS布局设置

先确保导航粘性、Logo不被压缩、菜单默认靠右：

.sticky-nav {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 0 1rem;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
  /* 若为图片则替换为img标签，无需固定宽度 */
  width: 140px;
  flex-shrink: 0; /* 关键：防止Logo被flex布局压缩 */
  margin-right: 1rem; /* 基础间距 */
}

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
  margin-left: auto; /* 强制菜单靠右 */
}

3. JS动态调整逻辑

实时计算Logo的总占用宽度，给菜单添加额外缓冲间距，适配窗口变化和Logo加载：

// 获取DOM元素
const stickyNav = document.querySelector('.sticky-nav');
const logo = document.querySelector('.logo');
const navMenu = document.querySelector('.nav-menu');

// 核心调整函数
function adjustNavGap() {
  // 计算Logo的实际总宽度（含外边距）
  const logoFullWidth = logo.offsetWidth + parseInt(getComputedStyle(logo).marginRight);
  // 设置菜单左侧间距：auto保持靠右，再加缓冲间距（20px可按需修改）
  navMenu.style.marginLeft = `calc(auto + ${logoFullWidth + 20}px)`;
}

// 初始化执行
adjustNavGap();

// 监听窗口尺寸变化
window.addEventListener('resize', adjustNavGap);

// 若Logo是图片，监听加载完成后再调整
if (logo.tagName === 'IMG') {
  logo.addEventListener('load', adjustNavGap);
}

关键说明 #

• 之前修改container导致重叠，大概率是没给Logo加flex-shrink:0，导致Logo被压缩后宽度计算失效，或者没利用margin-left:auto实现菜单靠右的基础布局
• 缓冲间距（示例中20px）可根据设计需求调整，确保视觉上的舒适距离
• 如果导航栏包含其他动态元素（如搜索框），只需在计算时加入对应元素的宽度即可

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