position: sticky 常用于导航栏固定、表头冻结、标题吸附和侧边栏跟随等场景，结合 top 值实现元素在滚动时吸附视口，提升用户体验且无需 JavaScript。
在CSS布局中，position: sticky 是一种非常实用的定位方式，适用于需要元素在滚动过程中“吸附”到视口特定位置的场景。它结合了 relative 和 fixed 定位的特点：在元素位于其正常文档流位置时表现为 relative，当滚动到某个阈值时则表现为 fixed。
导航栏固定定位
常见的应用场景是网站的二级导航栏或侧边目录。当用户向下滚动页面时，希望导航菜单跟随视口顶部，方便快速跳转。
- 设置 position: sticky 并配合 top: 0，可让导航栏在滚动到顶部时“粘住”不消失。
- 无需JavaScript即可实现平滑的吸顶效果，性能好且兼容性较佳（现代浏览器均支持）。
表格表头冻结
长表格在垂直滚动时，用户容易丢失列含义。通过 sticky 可以让表头始终可见。
- 对 <thead> 中的 <th> 设置 position: sticky; top: 0，实现表头悬浮。
- 多个表头行还可以分层固定（如使用不同的 top 值），适合复杂数据展示。
标签页或章节标题吸附
内容分章节的页面中，希望当前章节标题一直显示在视口顶部，帮助用户感知所处位置。
立即学习“前端免费学习笔记（深入）”；
- 每个章节使用 sticky 标题，在滚动时新标题会“推走”旧标题，形成自然过渡。
- 常用于文档、帮助中心、商品详情页等结构清晰的内容区域。
侧边栏跟随滚动
在主内容较长的情况下，侧边栏某些模块（如广告、目录、联系信息）需要保持可见。
- 给侧边栏内的模块设置 position: sticky; top: 20px，使其在到达视口顶部时停止随动。
- 比 JavaScript 实现更简洁，减少监听 scroll 事件带来的性能开销。
基本上就这些常见用途。sticky 的关键是父容器不能有超出的 overflow 隐藏（如 overflow: hidden），否则会失效。合理使用能提升用户体验，又不增加复杂逻辑。不复杂但容易忽略细节。
