1. CSS sticky定位基础与原理
什么是 position: sticky
在 CSS 中，position: sticky 是一种混合定位。元素在滚动时会像相对定位（relative）一样占据文档中的普通位置，但一旦滚动到设定的偏移量，它会切换为固定定位（fixed）并跟随视窗滚动，直到达到最近滚动容器的边界。
要点包括：滚动上下文、滚动边界和容器约束。父级容器的溢出属性（overflow）会影响 sticky 的生效区间。没有正确的滚动容器时，sticky 将相对浏览器视窗工作。
下面给出一个最小演示：在 CSS 中给元素设置 position: sticky 并指定 top 与/或 bottom。
.sticky-basic {position: sticky;top: 0;
}与普通定位的区别
与 relative、static等定位不同，sticky 会在滚动接近偏移量时保持在文档流中的位置，直至达到容器边界才停止滚动。这使得粘性导航、标题等场景成为可能。
另外，若父容器设有 overflow: hidden、overflow: auto 或 mask，sticky 的工作区域将被收缩，从而影响滚动吸附的行为。
工作原理简述
工作原理可以归纳为：在滚动过程中的位置由文档流控制，当顶边距达到偏移量时，元素会变成固定定位并随滚动视窗移动；一旦离开容器边界，就恢复为普通文档流中的位置。
为了正确演示，需要一个滚动容器，例如一个高度固定的区域内的滚动。下面的例子展示了在包含滚动的容器中应用 sticky 的效果。
2. 实现滚动吸附的关键参数：top/bottom
top 属性的作用与边界
top 定义元素在滚动时距离父滚动容器上边缘的偏移量。当窗口滚动时，若元素的上边缘距离达到设定的 top 值，则元素开始粘附在上方。
实践要点：在常见的布局中，放置一个固定高度的导航栏，将 top 设置为该导航栏的高度，使其在滚动时贴着顶部显示。
/* 顶部吸附示例 */
.container { height: 480px; overflow: auto; }
.sticky-top { position: sticky; top: 60px; background: #fff; }bottom 属性的作用与使用场景
bottom 让元素在容器底部具备粘附能力，等效于滑动到视口底部时才固定在底部。这在实现双向吸附时很有用。
使用场景示例：在页面底部的工具栏需要在滚动到页面底部时固定到视口的底部，以免遮挡内容。
/* 底部吸附示例 */
.container { height: 480px; overflow: auto; }
.sticky-bottom { position: sticky; bottom: 0; background: #fff; }注意与组合使用
在一个滚动容器内同时使用 top 和 bottom 时，浏览器需要计算出两边的边界，通常以最接近滚动边界的偏移量为准。要确保粘性元素的 初始高度 与父容器留出的空白一致，避免跳动。
此外，避免将 sticky 同时应用于多个嵌套层级过深的结构，否则滚动行为可能变得难以预测。下面是一个嵌套场景的简化示例。
3. 常见场景与兼容性注意事项
在实际布局中的应用场景
最常见的应用包括：页面标题栏的滚动吸附、侧边导航栏在主内容区域滚动时保持曝光，以及滚动区内的行动按钮随滚动出现。通过配合边距与填充，粘性效果可以与网格布局无缝结合。
设计时应关注可访问性：确保 颜色对比度、聚焦状态 与键盘导航的可达性，不影响用户在滚动中的阅读体验。
/* 示例：在左侧边栏中实现粘性导航 */
.layout { display: grid; grid-template-columns: 240px 1fr; }
.sidebar { position: sticky; top: 0; align-self: start; }
.main { padding-left: 20px; }浏览器兼容性与容器约束
大多数现代浏览器都已原生支持 position: sticky，但对 IE、一些老旧 Edge 版本可能不支持。要点包括：必须在有效的滚动容器内工作，并且父级容器不能过早截断滚动区域。
在涉及跨浏览器的体验时，建议用回退方案或特定前缀检测，但当前主流浏览器都原生支持，不需要大量兼容性代码。以下是一个常见容器结构的变体。
导航内容区...
与父容器的关系与布局约束
要理解 sticky 的工作领域，需关注父容器的 overflow 与 display 设置。某些布局如 flex 容器中的子项也可以使用 sticky，但要确保父容器的滚动机制对粘性元素可访问。
实践中，推荐在网格或 flex 布局中，单独将 吸附条 放在独立的滚动容器内，以避免影响主内容的滚动行为。
/* 常用布局中的 sticky 条目示例（不破坏主滚动） */
.wrapper { display: grid; grid-template-columns: 260px 1fr; height: 100vh; overflow: hidden; }
.sidebar { position: sticky; top: 0; height: 100%; overflow: auto; }
.content { overflow: auto; height: 100%; }