粘性定位（position: sticky）结合相对与固定定位，元素滚动到设定偏移值（如top: 0）时固定于视口，常见用于导航栏或列表标题吸附；2. 使用时需设置偏移值，父容器不能有overflow: hidden、transform等限制，且元素不可脱离文档流；3. 广泛支持于现代浏览器，适用于无需JavaScript的滚动固定场景。
粘性定位（position: sticky）是CSS中一种特殊的定位方式，结合了相对定位和固定定位的特点。元素在滚动过程中，会像普通文档流一样布局，直到达到设定的偏移位置（如 top: 0），就会“粘”在视窗的某个位置，直到父容器移出视口为止。
sticky定位的基本语法
使用 position: sticky 需要配合一个偏移值（top、bottom、left 或 right），否则它不会生效。
.sticky-element {
position: sticky;
top: 10px; /* 当元素距离视口顶部10px时，开始固定 */
}
注意：sticky 定位的元素必须有明确的祖先块级容器，并且不能脱离文档流（比如不要用在绝对定位或浮动元素上）。
实现导航栏滚动固定
最常见的应用是让页面导航栏在滚动到顶部时固定住。
立即学习“前端免费学习笔记（深入）”；
.navbar {
position: sticky;
top: 0;
background-color: white;
z-index: 100;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
当用户向下滚动页面，导航栏滚动到顶部（top: 0）时，它会固定在屏幕顶端，提升用户体验。一旦父容器结束或页面回滚，它又回到正常流中。
列表标题随内容滚动吸附
在长列表或分组内容中，可以使用 sticky 让每一组的标题吸附在顶部。
.section-header {
position: sticky;
top: 0;
background: #f8f8f8;
padding: 10px;
font-weight: bold;
}
滚动时，当前组的标题会停留在顶部，直到下一组标题将其“顶”上去。这种效果常见于通讯录、商品分类等界面。
使用注意事项
- 父元素不能有 overflow: hidden、overflow: auto 或 transform 等属性，否则 sticky 可能失效
- sticky 元素必须有明确的高度或内容支撑，避免布局错乱
- 确保设置了 top 或其他偏移值，否则行为不可见
- 在移动端和大多数现代浏览器中支持良好，但需注意老旧版本兼容性
基本上就这些。sticky 定位简单高效，适合需要“滚动到某位置后固定”的场景，无需JavaScript也能实现流畅的交互效果。
