CSS实现顶部吸顶导航：关闭通知栏后导航栏保持top:0固定

问题根因 #

当前两个吸顶元素的偏移值为硬编码固定值，未适配通知栏的显示/隐藏状态：

• 通知栏默认显示时，依靠position: sticky; top: 0固定在视口最顶部，此时导航栏需要预留通知栏高度的偏移量，才能正常贴在通知栏下方
• 点击关闭按钮隐藏通知栏后，导航栏写死的top: 15px偏移不会同步更新，直接导致位置错位，无法正确吸附在视口顶部

现有问题代码 #

当前通知栏样式：

display: flex;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  padding: 16px 0;
  position: sticky;
  top: 0; 

当前导航栏样式：

background-size: cover;
  background-position: top;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  top: 15px;
  position: sticky; 

修复方案 #

用CSS变量做偏移值联动，仅需少量改动即可实现状态自动适配，不需要写冗余JS逻辑手动修改导航栏样式：

1. 先在全局作用域定义通知栏高度的CSS变量，默认值填通知栏实际渲染高度（当前16px上下padding+单行文本的高度约为56px，可按项目实际尺寸调整）

   :root {
     --notice-bar-offset: 56px;
   }
   

2. 调整通知栏样式，新增关闭状态类，关闭时自动把偏移变量改成0，同时补全层级避免滚动时被覆盖：

   /* 通知栏默认显示样式 */
   .notice-bar {
     display: flex;
     align-content: center;
     justify-content: space-around;
     align-items: center;
     padding: 16px 0;
     position: sticky;
     top: 0;
     z-index: 100; /* 保证通知栏在导航栏上层 */
   }
   /* 通知栏关闭状态 */
   .notice-bar.is-closed {
     display: none;
     --notice-bar-offset: 0px;
   }
   

3. 调整导航栏样式，把原来硬编码的top:15px替换为CSS变量，自动适配通知栏的显示状态：

   .nav-bar {
     background-size: cover;
     background-position: top;
     display: flex;
     align-items: center;
     justify-content: space-around;
     overflow: hidden;
     position: sticky;
     top: var(--notice-bar-offset); /* 偏移值随通知栏状态自动变化 */
     z-index: 99;
   }
   

4. 点击关闭按钮的逻辑里，只需要给通知栏节点加上is-closed类即可，不需要额外操作导航栏。

注意事项 #

• 别直接抄示例里的56px默认值，打开开发者工具测量项目里通知栏的实际渲染高度，替换--notice-bar-offset的默认值，不然容易出现元素缝隙或者重叠问题
• 如果要做通知栏平滑收起的动画，别直接用display: none，可以改成height: 0; overflow: hidden; padding-top:0; padding-bottom:0加CSS过渡，同步更新偏移变量值就能实现流畅的吸顶联动
• 两个吸顶元素一定要设明确的z-index值，不然滚动的时候很容易出现层级错乱、导航栏把通知栏盖住的问题

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