含图片与汉堡菜单的固定头部搭配可滚动内容实现问题

我想要实现固定显示带Logo和汉堡菜单的头部，其余页面内容可滚动的效果。但把头部容器#title_and_menu的position改为fixed后，头部布局错乱，滚动时也有异常。

效果对比 #

• 预期效果：
• 当前效果：
• 滚动时异常效果：

现有代码 #

CSS代码 #

#title_and_menu {
  position: fixed;
  /*was previously relative when the code worked*/
  width: 100%;
}

#myHeader {
  display: inline-block;
  background-color: white;
}

#drop_menu {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  cursor: pointer;
}

#drop_menu>*{
  width: 35px;
  height: 1px;
  background-color: #c9c9c9;
  margin: 6px 0;
}

HTML代码 #

<body>
  <div id="title_and_menu">
    <div id="myHeader">
      <img src="https://ninepoint.cc/wp-content/themes/9pt2023/images/logo.svg" alt="home image" width="30" height="30">
    </div>
    <div id="drop_menu">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class=”section1” style="background-color:#e2e2e2;width:100%">
    <h2 align="center" style="padding-top:200px;color:#767676">Heading</h2>
    <h1 align="center" style="color:#707070">Introduction</h1>
    <p style="margin-left:1em;margin-right:5em;padding-bottom:12.5em;color:#9f9f9f" align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</body>

修复方案 #

问题根源 #

1. 固定定位元素脱离文档流，导致父元素高度塌陷，下方内容上移和头部重叠
2. #title_and_menu未处理默认边距/内边距，易出现横向溢出或布局错位
3. 绝对定位的汉堡菜单依赖父元素定位上下文，固定定位父元素需补充布局规则

具体修复步骤 #

1. 给固定头部补充背景色、层级和盒模型规则，避免内容穿透和溢出：

   #title_and_menu {
     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     background-color: white; /* 与Logo容器背景统一 */
     z-index: 999; /* 确保头部处于最上层 */
     box-sizing: border-box; /* 防止padding/border撑宽容器 */
     padding: 10px 0; /* 调整内边距优化布局 */
   }
   

2. 给下方内容容器添加顶部外边距，避开固定头部：

   .section1 {
     margin-top: 50px; /* 根据头部实际高度调整 */
   }
   

3. 调整Logo容器的左侧间距，和汉堡菜单的右侧间距形成对称：

   #myHeader {
     display: inline-block;
     margin-left: 25px;
   }
   

完整修复后代码 #

CSS

#title_and_menu {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 999;
  box-sizing: border-box;
  padding: 10px 0;
}

#myHeader {
  display: inline-block;
  margin-left: 25px;
}

#drop_menu {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  cursor: pointer;
}

#drop_menu>*{
  width: 35px;
  height: 1px;
  background-color: #c9c9c9;
  margin: 6px 0;
}

.section1 {
  margin-top: 50px;
  background-color:#e2e2e2;
  width:100%;
  box-sizing: border-box;
}

HTML

<body>
  <div id="title_and_menu">
    <div id="myHeader">
      <img src="https://ninepoint.cc/wp-content/themes/9pt2023/images/logo.svg" alt="home image" width="30" height="30">
    </div>
    <div id="drop_menu">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="section1">
    <h2 align="center" style="padding-top:200px;color:#767676">Heading</h2>
    <h1 align="center" style="color:#707070">Introduction</h1>
    <p style="margin-left:1em;margin-right:5em;padding-bottom:12.5em;color:#9f9f9f" align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</body>

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