如何创建从上至下展开的悬浮导航栏？解决间距与滚动异常问题

核心调整思路 #

• 用固定定位确保导航栏覆盖在内容上方，通过calc(100vh - 头部高度)精确控制导航栏高度，避免百分比高度的不确定性
• 内部嵌套容器实现flex均匀分布，同时通过min-height: max-content保证窗口缩小时可正常滚动
• 简化JS逻辑，提升代码效率

修改后的完整代码 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="header">
  <ul>
    <li class="first-link">
      <a href="javascript:void(0);">Link 1</a>
    </li>
    <li class="second-link">
      <a href="javascript:void(0);">Link 1</a>
    </li>
    <li class="third-link">
      <a href="javascript:void(0);">Open nav</a>
    </li>
  </ul>
</div>

<div id="header-overflow">
  <!-- 新增嵌套容器用于flex布局 -->
  <div class="nav-links">
    <a href="javascript:void(1);">Link 1</a>
    <a href="javascript:void(2);">Link 2</a>
    <a href="javascript:void(3);">Link 3</a>
    <a href="javascript:void(4);">Link 4</a>
  </div>
</div>

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

CSS

body {
  margin: 0;
}

div#header {
  background: #f1f1f1;
  box-shadow: 0 2px 14px #ccc;
  position: sticky;
  top: 0;
  padding: 10px 5px;
  /* 固定头部高度，方便计算导航栏高度 */
  height: 60px;
  box-sizing: border-box;
}

div#header ul {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div#header ul li.third-link {
  display: flex;
  place-content: flex-end;
  flex: 50%;
}

div#header ul li a {
  font-family: sans-serif;
  text-transform: uppercase;
  color: #000;
  font-size: 18px;
  text-decoration: none;
  padding: 6px 18px;
  display: flex;
}

div#header-overflow {
  display: none;
  /* 用calc计算高度，减去头部固定高度 */
  height: calc(100vh - 60px);
  width: 100%;
  position: fixed;
  top: 60px; /* 与头部下沿对齐 */
  left: 0;
  background-color: #111;
  overflow: auto;
}

/* 嵌套容器实现均匀分布 */
.nav-links {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: max-content; /* 确保窗口缩小时内容能撑开，触发滚动 */
  padding: 20px 0;
  height: 100%;
  box-sizing: border-box;
}

div#header-overflow a {
  color: #fff;
  text-decoration: none;
  padding: 15px 25px;
  font-size: 28px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
}

section {
  padding: 0 15px;
  font-size: 25px;
}

JS

$(document).ready(function() {
  $("li.third-link a").click(function() {
    $(this).toggleClass("opened-nav");
    $("#header-overflow").toggle();
  });
});

关键改动说明 #

1. 导航栏定位与高度：将bottom:0改为top:60px，配合calc(100vh - 60px)，精确占据头部下方的整个视口高度，避免百分比高度受父元素影响
2. 嵌套flex容器：新增.nav-links容器，用justify-content: space-evenly实现链接均匀分布，同时min-height: max-content保证当窗口高度小于链接总高度时，容器能撑开，外部导航栏自动显示滚动条
3. 固定头部高度：给#header设置固定高度并开启box-sizing: border-box，确保计算导航栏高度时准确无误
4. 简化JS逻辑：用toggleClass和toggle方法替代手动判断类名，代码更简洁高效

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