使用sticky定位时子菜单随滚动移位的技术问题

AI 小北

2026-8-3

问题原因及解决方法

为什么子菜单会随页面滚动下移？

你给子菜单设的top: 4.5rem是固定值，但导航栏未加sticky类时属于文档流元素，加上sticky类后变成fixed定位脱离文档流，这时候固定的top值就会让子菜单和导航栏的相对位置出现偏差。另外你写的.sticky+.sub-menu选择器完全无效——sub-menu是嵌套在导航栏内部的，不是紧跟在导航栏后面的元素，这个样式规则根本不会被触发。

修复步骤：

统一子菜单的定位逻辑
子菜单的top值应该和导航栏高度绑定，这样不管导航栏是否固定，子菜单都会紧贴在它下方。先给导航栏设固定高度：

#navbar {
  height: 4.5rem; /* 和你原来的子菜单top值对应 */
}

然后把子菜单的top值保持和导航栏高度一致：

.sub-menu {
  top: 4.5rem; /* 与导航栏高度匹配 */
  /* 其他样式不变 */
}

修正导航栏fixed后的样式
给sticky类加上高度，确保导航栏固定后高度不变，避免子菜单位置偏移：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  height: 4.5rem; /* 和导航栏高度统一 */
}

修复HTML结构错误
你HTML里nav标签内的ul.nav-list后面多写了一个<ul>，应该改成闭合标签</ul>，否则会导致结构混乱：

<nav>
  <ul class="nav-list">
    <li>
      <a href="">Category</a>
      <ul class="sub-menu">
        <li><a href="#">shirts</a> </li>
      </ul>
    </li>
  </ul> <!-- 这里原来是错误的<ul>，改为闭合标签 -->
</nav>

可选：用CSS变量统一管理高度
为了避免硬编码数值，可使用CSS变量统一维护导航栏高度，后续修改更方便：

:root {
  --navbar-height: 4.5rem;
}

#navbar {
  height: var(--navbar-height);
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--navbar-height);
}

.sub-menu {
  top: var(--navbar-height);
  /* 其他样式不变 */
}