你可能会说
导航栏能不能滚到顶部后就固定住，不要跟着滚走？
吸顶（Sticky）让元素在滚动到特定位置后「粘住」固定，不再随页面滚走。
元素滚动到页面顶部后就「粘」在那里，不随页面滚走。导航栏、侧边栏目录常用这个效果。
生活类比
像冰箱贴——不管你把冰箱门转到哪，贴子始终在原来的位置。
🎮 动手试试
👇 滚动下方区域，观察导航栏吸顶效果
关于「吸顶」，以下哪个描述最准确？
你可以这样告诉 AI
帮我把侧边栏目录做成 sticky：滚动时固定在视口右侧，到达底部时停止跟随，用 position: sticky + top: 80px。
Fixed 始终固定在视口某位置（脱离文档流），Sticky 是正常流中滚动到阈值后才固定。
Absolute 相对最近定位祖先定位，完全脱离文档流，和滚动无关。
固定导航/目录
导航栏滚动到顶部后吸顶固定、侧边栏目录跟随滚动，让用户随时能操作或定位。
和 AI 协作时
想让 AI 做吸顶效果时，直接说「导航栏滚动到顶部后粘住不动，用 position: sticky + top: 0」。
移动端受限场景
position: sticky 在 iOS Safari 的滚动容器中兼容性差，移动端可改用 fixed + JS 监听滚动切换。
与滚动布局无关的项目
不需要滚动的全屏应用或不涉及前端 UI 的项目完全用不到吸顶。
元素滚动到页面顶部后就「粘」在那里，不随页面滚走。导航栏、侧边栏目录常用这个效果。
像冰箱贴——不管你把冰箱门转到哪，贴子始终在原来的位置。
和 AI 沟通时提到「导航栏滚动时固定在顶部」，就是做吸顶效果。