Sticky定位需设置阈值且父容器无overflow限制，现代浏览器支持较好，旧版Safari需加-webkit-前缀，IE不支持需JS模拟或降级处理。
Sticky定位（position: sticky）是一种非常实用的CSS布局方式，可以让元素在滚动到特定位置时“粘”在视口某个地方。但由于浏览器兼容性差异，使用时需注意一些技巧来确保在不同浏览器中正常工作。
理解Sticky定位的基本要求
Sticky定位不是简单设置position: sticky就能生效，它有特定前提：
- 必须设置一个阈值（top、bottom、left 或 right），例如 top: 0，否则行为等同于 relative
- 父容器不能有 overflow: hidden 或 overflow: auto，否则在某些浏览器中会失效
- 元素必须是正常文档流中的块级元素
处理主流浏览器兼容问题
现代浏览器基本支持 position: sticky，但旧版本需要前缀或替代方案：
- WebKit内核浏览器（如旧版Safari）需要 -webkit-sticky
- 推荐写法：
position: -webkit-sticky; position: sticky;
- IE完全不支持 sticky，需用JavaScript模拟或接受降级显示
避免常见布局陷阱
某些CSS结构会导致sticky失效，需特别注意：
立即学习“前端免费学习笔记（深入）”；
- Flex容器中子元素设为 sticky 时，在部分Android浏览器中可能不生效，可尝试给父级加 min-height: 0
- 表格单元格（td/th）内使用 sticky 可能无效，建议改用 div 布局
- 避免在 transform、filter 等创建新层叠上下文的元素内使用
提供降级方案提升体验一致性
对于不支持的浏览器，可通过以下方式保持可用性：
- 使用 @supports 查询判断支持性，单独定义样式
@supports (position: sticky) { .header { top: 0; } } - JavaScript监听滚动事件动态切换 fixed 类（注意性能优化，使用节流）
- 设计上允许功能降级，比如仅在移动端启用 sticky，桌面端用静态布局
