使用 position: sticky 可实现侧边栏滚动固定，需设置 top 值并确保父容器可滚动且内容足够长，结合 flex 布局与 height: fit-content 可优化效果，注意避免 overflow: hidden 等限制行为。
使用 CSS 的 position: sticky 可以轻松实现侧边栏在滚动时固定在视口的某个位置，比如常见于文章页面的目录或广告栏。它结合了相对定位和固定定位的特点，只有在满足特定条件时才“粘”在屏幕上。
1. 基本语法与结构要求
position: sticky 需要设置一个偏移值（如 top）才能生效。同时，它必须应用在有父容器且该容器高度超过视口的内容中，否则无法产生滚动效果。
常见用法：- 给侧边栏元素设置 position: sticky
- 指定粘性触发的边界，例如 top: 20px
- 确保其父容器可滚动且内容足够长
示例代码：
<div class="container"> <div class="sidebar">这里是侧边栏</div> <div class="content">主内容区，要有足够高度产生滚动</div> </div>
2. 实际样式设置
下面是实现一个右侧固定侧边栏的完整样式示例：
立即学习“前端免费学习笔记（深入）”；
.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>说明：
- display: flex 让主内容和侧边栏并排
- top: 20px 表示当侧边栏滚动到距离视口顶部 20px 时开始“粘住”
- height: fit-content 确保 sticky 正常工作，避免被拉伸
3. 注意事项与常见问题
sticky 并非在所有场景下都如预期工作，以下几点需特别注意：
- 父元素不能有 overflow: hidden 或 overflow: auto，这会限制 sticky 的行为
- sticky 元素必须有明确的 top 或 bottom 值
- 如果侧边栏本身内容太短，可能还没触发就已滚出视野
- 在某些移动端浏览器中表现略有差异，建议测试真机效果
基本上就这些。只要结构合理、样式正确，CSS sticky 实现侧边栏固定非常简洁高效，无需 JavaScript。不复杂但容易忽略细节。
