CSS粘性定位（Sticky Positioning）[编辑 | 编辑源代码]

CSS粘性定位（Sticky Positioning）是一种混合定位模式，结合了相对定位（relative）和固定定位（fixed）的特性。当元素在视口（viewport）内滚动到特定阈值时，它会从相对定位切换为固定定位，从而实现“粘附”效果。这一特性非常适合创建导航栏、表格标题或侧边栏等需要动态固定的布局元素。

基本语法[编辑 | 编辑源代码]

粘性定位通过

position: sticky

声明实现，同时需指定至少一个“粘附边界”（如

top

,

bottom

,

left

,

right

）。语法如下：

.element {
    position: sticky;
    top: 10px; /* 当元素距离视口顶部10px时触发固定 */
}

关键点[编辑 | 编辑源代码]

阈值：
```
top: 10px
```
表示元素距离视口顶部小于等于10px时固定。
容器限制：粘性元素仅在父容器内有效，滚动出父容器后恢复常规布局。
兼容性：现代浏览器均支持，但旧版需前缀（如
```
-webkit-sticky
```
）。

代码示例[编辑 | 编辑源代码]

以下是一个导航栏粘性定位的完整示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { height: 2000px; } /* 模拟长页面 */
        .header {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
        }
        .nav {
            background: #333;
            color: white;
            padding: 10px;
            position: sticky;
            top: 0; /* 触发粘性定位 */
        }
    </style>
</head>
<body>
    <div class="header">网站标题</div>
    <div class="nav">导航栏（滚动时会固定在顶部）</div>
    <p>页面内容...</p>
</body>
</html>

输出效果：滚动页面时，导航栏会在到达视口顶部时固定，其余内容继续滚动。

实际应用场景[编辑 | 编辑源代码]

1. 表格标题固定[编辑 | 编辑源代码]

长表格滚动时，表头保持可见：

th {
    position: sticky;
    top: 0;
    background: white;
}

2. 侧边栏目录[编辑 | 编辑源代码]

文章目录在滚动时停留在可视区域：

.toc {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

行为解析[编辑 | 编辑源代码]

粘性定位的触发逻辑可通过以下流程图理解：

注意事项[编辑 | 编辑源代码]

父容器高度：若父容器无滚动空间（如高度未限制），粘性定位无效。
重叠控制：使用
```
z-index
```
管理固定元素的层叠顺序。
性能影响：过度使用可能导致渲染性能下降。

数学原理[编辑 | 编辑源代码]

粘性定位的阈值计算可表示为： $固定条件 = {\begin{cases} true, & 当 scrollTop \geq offsetTop - threshold \\ false, & 其他情况 \end{cases}$

浏览器兼容性[编辑 | 编辑源代码]

支持情况
浏览器	版本
Chrome	56+
Firefox	32+
Safari	6.1+ (需前缀)
Edge	16+

总结[编辑 | 编辑源代码]

粘性定位是增强页面交互性的实用工具，尤其适合需要动态固定的UI组件。掌握其阈值设置和容器限制规则，可高效实现复杂的滚动布局效果。