使用 position: sticky 可实现侧边栏滚动固定，需设置 top 值且父容器不能有 overflow: hidden；通过 flex 布局结合 sticky，可使侧边栏在滚动时吸附在视口指定位置，适用于导航、筛选栏等场景，配合阴影提升视觉效果。
使用 CSS 的 position: sticky 可以轻松实现侧边栏在滚动时固定在可视区域内，只要配合合适的容器设置就能生效。它既不像 fixed 那样完全脱离文档流，又能实现类似 fixed 的视觉效果，非常适合用于侧边栏、导航栏等场景。
1. 基本语法与条件
position: sticky 是一种相对定位和固定定位的结合体。元素在父容器内正常流动，当滚动到设定的偏移位置时，变为“粘性”状态并固定在视口中。
要使 sticky 生效，必须满足以下条件：
- 设置 position: sticky;
- 指定一个偏移量，如 top、bottom 等
- 其父元素不能有 overflow: hidden 或 overflow: auto（否则会限制 sticky 行为）
2. 实现侧边栏固定的基本结构
以下是一个典型的布局示例：
立即学习“前端免费学习笔记（深入）”；
主内容区
对应的 CSS：
.container {
display: flex;
}
.sidebar {
width: 250px;
position: sticky;
top: 20px; / 当滚动到距离视口顶部 20px 时，开始固定 /
height: fit-content; / 避免侧边栏过长超出有效范围 /
}
.content {
flex: 1;
padding: 20px;
}
3. 注意事项与常见问题
虽然 sticky 很方便，但有几个关键点容易出错：
- 父容器不要设置 overflow: hidden：这会让 sticky 失效，尤其是包裹在 modal 或 scrollable 区域中时
- 确保有足够的滚动空间：如果页面或容器太短，无法滚动，sticky 就不会触发
- top 值决定触发时机：设为 0 就紧贴顶部，设为 20px 则留出间距
- 兼容性良好：现代浏览器都支持，IE 不支持需注意
4. 实际应用场景建议
适合使用 sticky 侧边栏的场景包括：
- 文章页的目录导航
- 电商页面的商品筛选栏
- 仪表盘中的操作菜单
为了更好的用户体验，可以给 sticky 元素加一点阴影或背景色，让它在固定时更突出：
.sidebar {
position: sticky;
top: 20px;
background: white;
padding: 16px;
border: 1px solid #ddd;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
基本上就这些。不复杂但容易忽略父级容器的限制和 top 值的必要性。只要结构合理，sticky 能非常自然地实现侧边栏固定效果。
