Flex布局导航栏折叠与sticky实现技巧

大家好，我们又见面了啊~本文《Flex布局下实现导航栏折叠与sticky定位方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

使用Flex布局实现导航项水平排列，结合position: sticky使导航栏滚动时固定顶部，通过媒体查询与JavaScript控制小屏下折叠菜单显示，提升响应式体验。

要在CSS中实现导航栏的折叠效果并结合定位功能，可以使用 Flexbox 布局管理导航项的排列，再配合 position: sticky 实现滚动时固定在顶部的效果。同时通过媒体查询或JavaScript控制小屏幕下的折叠（响应式汉堡菜单）。以下是具体实现方法。

使用 Flex 布局构建水平导航栏

利用 Flexbox 可以轻松让 ul 内的 li 导航项水平排列，并自动填充可用空间，保持布局整洁。

示例代码：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0 1rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

添加 position: sticky 实现粘性定位

让导航栏在页面滚动时始终停留在视口顶部，提升用户体验。

只需为导航容器设置：

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

这样导航栏会在滚动到顶部时“吸附”住，不会被内容遮挡。

实现折叠菜单（响应式）

在小屏幕上隐藏导航链接，通过按钮切换显示/隐藏状态。

• 使用 @media 查询判断屏幕尺寸
• 默认在小屏下将 .nav-links 设为 display: none
• 通过 JavaScript 切换类名控制显示

HTML结构示例：

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">首页</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
  </ul>
  <button class="toggle-btn">☰</button>
</nav>

JavaScript 控制显隐：

document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.nav-links').classList.toggle('show');
});

CSS 中定义 show 类：

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #444;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
  }
  .nav-links.show {
    display: flex;
  }
}

整合效果：Flex + Sticky + 折叠

最终组合优势：

• 桌面端：Flex 水平布局 + 粘性定位，美观且固定
• 移动端：折叠菜单节省空间，点击展开
• 无需第三方框架即可实现专业导航体验

关键是确保 sticky 元素的父容器没有超出限制（如 overflow: hidden），否则会失效。

基本上就这些，不复杂但容易忽略细节。灵活运用 Flex 和 sticky，再加一点JS交互，就能做出实用又现代的导航栏。

今天关于《Flex布局导航栏折叠与sticky实现技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！