sticky定位结合relative与fixed特性,设置如top值后元素在滚动至临界点时固定于视口,常用于表头、导航栏等场景,需注意必须指定偏移量且父容器足够高,否则无效。

sticky 属性是 CSS 中 position 属性的一个值,用于创建“粘性定位”元素。它结合了 relative 和 fixed 定位的特点,让元素在滚动到特定位置前正常流动,到达设定临界点后像 fixed 一样固定在视窗中。
工作原理
一个设置了 position: sticky; 的元素,会根据用户的滚动行为动态切换表现:
- 在未到达设定的偏移位置(如 top: 10px)时,元素表现为相对定位(relative),保留在正常文档流中的位置
- 当滚动到该偏移位置与视口边界对齐时,元素变成固定定位(fixed),停留在指定位置不再随页面滚动而消失
- 当父容器或上下文不再覆盖该区域时,元素恢复为正常流中位置
使用条件和注意事项
sticky 并非在所有情况下都生效,需满足几个关键条件:
- 必须设置一个明确的偏移阈值,例如 top、bottom、left 或 right,否则 sticky 不起作用
- 元素必须位于一个有足够滚动范围的父容器中,且父元素高度要大于 sticky 元素自身高度
- sticky 元素不会脱离文档流,因此不会影响其他元素布局
- 在某些旧浏览器(如 IE)中不被支持,需注意兼容性
常见应用场景
sticky 定位非常适合需要局部固定的 UI 组件:
本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看
立即学习“前端免费学习笔记(深入)”;
- 表格的表头在滚动时始终可见
- 侧边栏导航在滚动过程中暂时固定
- 标签页或选项卡在内容区滚动时保持置顶
基本上就这些。用得恰当的话,sticky 能提升用户体验,实现简洁高效的交互效果,不复杂但容易忽略细节。比如只写 position: sticky 而忘记加 top 值,就会发现它“没反应”。









