如何在CSS中实现导航栏折叠与定位结合_Flex ul li与position sticky组合方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在CSS中实现导航栏折叠与定位结合_Flex ul li与position sticky组合方法

2025-11-29

浏览次数：次

返回列表

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

如何在css中实现导航栏折叠与定位结合_flex ul li与position sticky组合方法

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

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

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

示例代码：

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

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

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

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

添加 position: sticky 实现粘性定位

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

只需为导航容器设置：

.n*bar {
  position: sticky;
  top: 0;
  z-index: 100;
}

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

实现折叠菜单（响应式）

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

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

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

HTML结构示例：

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

J*aScript 控制显隐：

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

CSS 中定义 show 类：

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