使用 position: sticky 可实现无需 JavaScript 的粘性侧边栏，通过设置 top 值使侧边栏滚动时吸附视口顶部，需配合 flex 布局与合理结构，并避免父容器 overflow: hidden 以确保生效。
在现代网页布局中，侧边栏滚动定位（即“粘性侧边栏”）是一种常见需求。使用 CSS 的 position: sticky 可以轻松实现这一效果，无需 JavaScript，兼容性良好，且性能优秀。
什么是 position: sticky？
position: sticky 是一种相对定位和固定定位的混合模式。元素在正常文档流中表现为 relative，当滚动到特定阈值时，表现为 fixed，直到其父容器脱离视口。
要触发 sticky 效果，必须指定一个偏移阈值，如 top、bottom、left 或 right。
基本HTML结构
实现粘性侧边栏需要合理的HTML结构。通常包含一个主内容区和一个侧边栏：
立即学习“前端免费学习笔记（深入）”；
<div class="layout"> <main class="content">主内容</main> <aside class="sidebar">侧边栏内容</aside> </div>
CSS实现sticky侧边栏
通过设置 aside 元素为 sticky，并定义 top 值，即可让侧边栏在滚动时“吸附”在视口顶部。
示例CSS代码：
.layout {
display: flex;
gap: 20px;
}
<p>.content {
flex: 3;
padding: 20px;
}</p><p>.sidebar {
flex: 1;
position: -webkit-sticky; /<em> Safari 兼容 </em>/
position: sticky;
top: 20px; /<em> 当滚动到距顶部20px时，开始固定 </em>/
background-color: #f5f5f5;
padding: 20px;
border-radius: 8px;
}</p>
关键点：
- 父容器不要有 overflow: hidden，否则会阻止 sticky 生效
- sticky 元素必须有明确的 top 或其他方向值
- 确保侧边栏有足够的空间滚动，避免被内容截断
常见问题与注意事项
虽然 sticky 很方便，但有些情况需要注意：
- 父容器限制：如果父元素设置了 overflow: hidden、auto 或 scroll，sticky 可能失效
- 高度限制：侧边栏内容过长时，会自然退出粘性状态，这是正常行为
- Safari 兼容：建议添加 -webkit-sticky 以支持旧版 Safari
- flex布局配合：使用 flex 或 grid 布局可更好控制主内容与侧边栏的比例
基本上就这些。只要结构合理、样式正确，position: sticky 就能让你的侧边栏在滚动时自然吸附，提升阅读体验，实现起来也不复杂，但容易忽略细节影响效果。
