新闻中心 NEWS CENTER

如何使用CSS实现导航栏固定_position fixed sticky案例

2025-11-15

浏览次数：次

使用position: fixed使导航栏脱离文档流并固定于视口顶部，需手动设置margin-top避免内容遮挡；2. 使用position: sticky让导航栏在滚动到顶部时自动吸附，仍保留文档流位置，无需额外留白；3. fixed兼容性好但布局影响大，sticky更智能且自然，适合现代浏览器下的长页面设计。

如何使用css实现导航栏固定_position fixed sticky案例

实现导航栏固定在页面顶部，常用的方法是使用 CSS 的 position: fixed 或 position: sticky。两者都能让导航栏在滚动时保持可见，但行为略有不同。下面通过实际案例说明如何使用。

1. 使用 position: fixed 固定导航栏

当设置 position: fixed 时，元素会脱离文档流，相对于浏览器窗口固定位置，即使页面滚动也不会移动。

示例代码：

HTML:

页面内容

滚动查看效果...

CSS:
.n*bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 15px 0;
  z-index: 1000;
}

.content {
  margin-top: 70px; /* 避免内容被导航栏遮挡 */
}

注意：fixed 元素脱离文档流，下方内容可能被覆盖，因此需要给主体内容添加 margin-top 来留出空间。

2. 使用 position: sticky 实现粘性定位

position: sticky 是相对定位和固定定位的结合体。元素在滚动到特定阈值前表现为 relative，达到阈值后变为 fixed。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

示例代码：

HTML:

长页面内容

滚动到这里会看到导航栏粘住顶部...

CSS:
.n*bar-sticky {
  position: -webkit-sticky; /* Safari 兼容 */
  position: sticky;
  top: 0;
  background-color: #444;
  color: white;
  padding: 15px 0;
  z-index: 999;
}

.content {
  height: 2000px; /* 模拟长页面 */
  padding: 20px;
}

sticky 的优势是不需要手动计算 margin，它仍占据文档流中的位置，不会导致布局错乱。