如何用css sticky实现侧边栏固定-css教程-PHP中文网

如何用css sticky实现侧边栏固定

P粉602998670

发布： 2025-09-25 16:09:01

原创

921人浏览过

使用 position: sticky 可实现侧边栏滚动固定，需设置 top 值并确保父容器可滚动且内容足够长，结合 flex 布局与 height: fit-content 可优化效果，注意避免 overflow: hidden 等限制行为。

如何用css sticky实现侧边栏固定

使用 CSS 的 position: sticky 可以轻松实现侧边栏在滚动时固定在视口的某个位置，比如常见于文章页面的目录或广告栏。它结合了相对定位和固定定位的特点，只有在满足特定条件时才“粘”在屏幕上。

1. 基本语法与结构要求

position: sticky 需要设置一个偏移值（如 top）才能生效。同时，它必须应用在有父容器且该容器高度超过视口的内容中，否则无法产生滚动效果。

常见用法：

给侧边栏元素设置 position: sticky
指定粘性触发的边界，例如 top: 20px
确保其父容器可滚动且内容足够长

示例代码：

<div class="container">
  <div class="sidebar">这里是侧边栏</div>
  <div class="content">主内容区，要有足够高度产生滚动</div>
</div>

登录后复制

2. 实际样式设置

下面是实现一个右侧固定侧边栏的完整样式示例：

立即学习“前端免费学习笔记（深入）”；

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}
<p>.sidebar {
position: sticky;
top: 20px;
height: fit-content; /<em> 防止撑满容器 </em>/
background: #007acc;
color: white;
padding: 20px;
border-radius: 8px;
width: 200px;
}</p><p>.content {
flex: 1;
line-height: 1.8;
}</p>

登录后复制

说明：