CSS position: sticky 属性值

position: sticky 是 CSS 定位属性中相对较新的值。粘性定位是相对定位和固定定位的混合体：元素在跨越指定的阈值之前表现得像相对定位，之后表现得像固定定位。

这是实现"吸顶导航"、"表格标题固定"等效果的现代解决方案。

单词释义：sticky 意为"粘性的"，表示元素会"粘"在某个位置不动。

基本语法

position: sticky 需要配合至少一个方向（top、right、bottom、left）的阈值来指定"粘性"生效的位置。

/* 语法 */
position: sticky;

/* 常用组合：滚动到距离顶部 10px 时固定 */
.sticky-header {
    position: sticky;
    top: 10px;
}

工作原理

sticky 定位的工作方式可以分解为两个阶段：

阶段 1：正常滚动（相对定位）

当元素在视口中未达到指定的阈值时，元素按照正常文档流布局，会随页面滚动移动。此时它相当于 position: relative。

阶段 2：固定显示（固定定位）

当元素滚动到超过指定的阈值时，元素固定在那个位置，不再随页面滚动。此时它相当于 position: fixed。

阈值条件

属性	触发条件
`top: 10px`	元素顶部距离视口顶部 > 10px 时固定
`bottom: 10px`	元素底部距离视口底部 > 10px 时固定
`left: 10px`	元素左边距离视口左边 > 10px 时固定
`right: 10px`	元素右边距离视口右边 > 10px 时固定

核心特性

特性 1：双向行为

sticky 兼具 relative 和 fixed 的特点，是两者的完美结合。

特性 2：不需要父元素设置定位

与 absolute 不同，sticky 元素不需要父元素设置任何定位属性。

特性 3：父容器overflow的限制

如果父元素设置了 overflow: hidden、overflow: auto 或 overflow: scroll，sticky 定位可能会失效。

特性 4：激活 z-index

sticky 定位会激活 z-index 属性。

实例

让我们通过实例深入理解 position: sticky 的特性。

示例 1：吸顶导航栏

这是 sticky 定位最常见的应用：实现吸顶导航栏。

实例

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

/* 页面顶部大图区域 */
.hero {
height: 300px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 36px;
font-weight: bold;
}

/* 粘性导航栏 */
.sticky-nav {
position: sticky;
top: 0; /* 滚动到顶部时固定 */
background-color: #2c3e50;
color: white;
padding: 15px 30px;
z-index: 100;
}

.sticky-nav ul {
list-style: none;
display: flex;
gap: 30px;
max-width: 800px;
margin: 0 auto;
}

.sticky-nav a {
color: white;
text-decoration: none;
}

/* 内容区域 */
.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.section {
margin-bottom: 40px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 4px;
}

.tall-spacer {
height: 1500px;
}
</style>
</head>
<body>
<div class="hero">
RUNOOB 教程
</div>

<nav class="sticky-nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">实例</a></li>
<li><a href="#">工具</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>

<div class="content">
<div class="section">
<h2>第一章：入门</h2>
<p>这是第一章的内容。向下滚动查看导航栏的粘性效果。</p>
</div>
<div class="section">
<h2>第二章：进阶</h2>
<p>这是第二章的内容。</p>
</div>
<div class="section">
<h2>第三章：高级</h2>
<p>这是第三章的内容。</p>
</div>
<div class="section">
<h2>第四章：实战</h2>
<p>这是第四章的内容。</p>
</div>
<div class="section">
<h2>第五章：项目</h2>
<p>这是第五章的内容。</p>
</div>
<div class="tall-spacer"></div>
</div>
</body>
</html>

示例 2：表格标题行固定

sticky 定位非常适合用于固定表格的表头：

实例

<!DOCTYPE html>
<html>
<head>
<style>
.table-container {
max-width: 600px;
max-height: 300px;
overflow-y: auto; /* 需要设置 overflow 才能看到固定效果 */
border: 2px solid #ddd;
}

table {
width: 100%;
border-collapse: collapse;
}

/* 表头使用 sticky 定位 */
th {
position: sticky;
top: 0;
background-color: #3498db;
color: white;
padding: 12px;
text-align: left;
}

td {
padding: 10px 12px;
border-bottom: 1px solid #eee;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>学生成绩表</h2>
<p>向下滚动查看表头固定效果：</p>

<div class="table-container">
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>张三</td>
<td>85</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>90</td>
<td>87</td>
<td>95</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>78</td>
<td>85</td>
<td>82</td>
</tr>
<tr>
<td>004</td>
<td>赵六</td>
<td>92</td>
<td>88</td>
<td>90</td>
</tr>
<tr>
<td>005</td>
<td>钱七</td>
<td>88</td>
<td>91</td>
<td>87</td>
</tr>
<tr>
<td>006</td>
<td>孙八</td>
<td>85</td>
<td>89</td>
<td>93</td>
</tr>
<tr>
<td>007</td>
<td>周九</td>
<td>80</td>
<td>86</td>
<td>84</td>
</tr>
<tr>
<td>008</td>
<td>吴十</td>
<td>91</td>
<td>93</td>
<td>89</td>
</tr>
<tr>
<td>009</td>
<td>郑十一</td>
<td>87</td>
<td>85</td>
<td>88</td>
</tr>
<tr>
<td>010</td>
<td>陈十二</td>
<td>89</td>
<td>90</td>
<td>91</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

示例 3：侧边栏粘性效果

当页面内容很长时，可以让侧边栏在滚动到一定位置后固定：

实例

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
}

.container {
display: grid;
grid-template-columns: 1fr 200px;
max-width: 900px;
margin: 0 auto;
}

.main-content {
padding: 20px;
}

/* 粘性侧边栏 */
.sidebar {
position: sticky;
top: 20px; /* 距离顶部 20px 时固定 */
height: fit-content;
background-color: #3498db;
color: white;
padding: 15px;
border-radius: 4px;
}

.content-block {
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 20px;
border-radius: 4px;
}

.tall-block {
height: 800px;
}
</style>
</head>
<body>
<div class="container">
<div class="main-content">
<h1>主内容区域</h1>
<p>向下滚动查看侧边栏的粘性效果。</p>

<div class="content-block">
<h2>内容区域 1</h2>
<p>这是第一段内容。</p>
</div>
<div class="content-block">
<h2>内容区域 2</h2>
<p>这是第二段内容。</p>
</div>
<div class="content-block">
<h2>内容区域 3</h2>
<p>这是第三段内容。</p>
</div>
<div class="content-block tall-block">
<h2>长内容区域</h2>
<p>这是比较长的内容区域，用来展示侧边栏的粘性效果。</p>
<p>继续向下滚动...</p>
</div>
<div class="content-block">
<h2>内容区域 4</h2>
<p>这是第四段内容。</p>
</div>
<div class="content-block">
<h2>内容区域 5</h2>
<p>这是第五段内容。</p>
</div>
</div>

<aside class="sidebar">
<h3>侧边栏</h3>
<p>我会粘在右侧</p>
<p>直到滚动出视口</p>
</aside>
</div>
</body>
</html>

示例 4：分段标题固定

sticky 定位非常适合用于文章的分段标题固定：

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}

/* 分段标题固定 */
.chapter-title {
position: sticky;
top: 0;
background-color: #2c3e50;
color: white;
padding: 15px;
margin: 20px 0 10px;
border-radius: 4px;
}

.content {
padding: 0 15px;
line-height: 1.8;
margin-bottom: 30px;
}

.tall-content {
height: 600px;
}
</style>
</head>
<body>
<h1>书籍章节示例</h1>

<div class="chapter-title">第一章：初识编程</div>
<div class="content">
<p>编程是一门创造性的艺术。本章将带你了解什么是编程，以及为什么学习编程如此重要。</p>
</div>

<div class="chapter-title">第二章：环境搭建</div>
<div class="content tall-content">
<p>在开始编写代码之前，我们需要先搭建开发环境。本章介绍如何安装必要的工具和配置开发环境。</p>
<p>内容区域足够长，以便产生滚动效果。</p>
</div>

<div class="chapter-title">第三章：基础语法</div>
<div class="content">
<p>本章介绍编程语言的基础语法，包括变量、数据类型、运算符等核心概念。</p>
</div>

<div class="chapter-title">第四章：控制结构</div>
<div class="content tall-content">
<p>控制结构决定了程序的执行顺序。介绍条件语句和循环语句的使用方法。</p>
</div>

<div class="chapter-title">第五章：函数</div>
<div class="content">
<p>函数是组织代码的基本单元。本章讲解如何定义和调用函数。</p>
</div>
</body>
</html>

示例 5：双向粘性定位

可以同时设置水平和垂直方向的粘性定位：

实例

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}

.calendar {
width: 350px;
border: 2px solid #ddd;
}

/* 星期标题行 - 顶部固定 */
.weekday {
position: sticky;
top: 0;
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}

/* 时间列 - 左侧固定 */
.time-label {
position: sticky;
left: 0;
background-color: #ecf0f1;
padding: 20px 10px;
border-right: 1px solid #ddd;
font-weight: bold;
}

/* 日期单元格 */
.day-cell {
padding: 20px;
border: 1px solid #eee;
text-align: center;
}

.day-cell:nth-child(2) {
position: sticky;
left: 50px; /* 时间列宽度 + 边框 */
background-color: white;
}

/* 模拟日历网格 */
.calendar-grid {
display: grid;
grid-template-columns: 50px repeat(5, 1fr);
}
</style>
</head>
<body>
<h2>课程表（双向粘性）</h2>
<p>向下和向右滚动查看效果：</p>

<div class="calendar">
<div class="calendar-grid">

<div></div> 
<div class="weekday">周一</div>
<div class="weekday">周二</div>
<div class="weekday">周三</div>
<div class="weekday">周四</div>
<div class="weekday">周五</div>


<div class="time-label">8:00</div>
<div class="day-cell">数学</div>
<div class="day-cell">语文</div>
<div class="day-cell">英语</div>
<div class="day-cell">物理</div>
<div class="day-cell">化学</div>


<div class="time-label">9:00</div>
<div class="day-cell">英语</div>
<div class="day-cell">数学</div>
<div class="day-cell">化学</div>
<div class="day-cell">语文</div>
<div class="day-cell">物理</div>


<div class="time-label">10:00</div>
<div class="day-cell">物理</div>
<div class="day-cell">化学</div>
<div class="day-cell">数学</div>
<div class="day-cell">英语</div>
<div class="day-cell">语文</div>


<div class="time-label">11:00</div>
<div class="day-cell">语文</div>
<div class="day-cell">物理</div>
<div class="day-cell">数学</div>
<div class="day-cell">化学</div>
<div class="day-cell">英语</div>
</div>
</div>
</body>
</html>

注意事项

浏览器兼容性：position: sticky 在现代浏览器中得到良好支持，但 IE 浏览器完全不支持。如果需要支持 IE，需要使用 JavaScript 或其他 polyfill 方案作为降级处理。

父元素 overflow 的影响

如果父元素设置了以下属性，sticky 定位会失效：

overflow: hidden
overflow: auto
overflow: scroll

必须设置阈值

至少需要设置 top、right、bottom 或 left 中的一个，否则 sticky 不会生效（元素会按照正常文档流布局）。

阈值计算

sticky 定位的阈值是相对于视口计算的，而不是父元素。

与其它定位值的对比

定位值	是否脱离文档流	固定条件	兼容性
`static`	否	无	所有浏览器
`relative`	否	无	所有浏览器
`absolute`	是	无	所有浏览器
`fixed`	是	始终固定	所有浏览器
`sticky`	阈值前否，阈值后是	滚动超过阈值	现代浏览器（IE 不支持）

常见应用场景

场景 1：吸顶导航

.nav {
    position: sticky;
    top: 0;
}

场景 2：表格表头固定

th {
    position: sticky;
    top: 0;
}

场景 3：侧边栏固定

.sidebar {
    position: sticky;
    top: 20px;
}

场景 4：文章章节标题

.chapter-header {
    position: sticky;
    top: 0;
    background: white;  /* 固定时显示背景 */
}

总结

position: sticky 是现代网页布局中非常实用的技术：

是相对定位和固定定位的结合体
需要设置至少一个方向的阈值（top/right/bottom/left）
滚动超过阈值前：按照正常文档流布局（相对定位）
滚动超过阈值后：固定在当前位置（固定定位）
不需要父元素设置任何定位
父元素设置 overflow 会导致失效
现代浏览器支持良好，IE 不支持
常用于吸顶导航、表头固定、侧边栏固定、分段标题固定

CSS position 属性

菜鸟教程 -- 学的不仅是技术，更是梦想！

CSS3 教程

CSS 响应式设计

CSS 参考手册

CSS position: sticky 属性值

基本语法

工作原理

阶段 1：正常滚动（相对定位）

阶段 2：固定显示（固定定位）

阈值条件

核心特性

特性 1：双向行为

特性 2：不需要父元素设置定位

特性 3：父容器overflow的限制

特性 4：激活 z-index

实例

示例 1：吸顶导航栏

实例

示例 2：表格标题行固定

实例

示例 3：侧边栏粘性效果

实例

示例 4：分段标题固定

实例

示例 5：双向粘性定位

实例

注意事项

父元素 overflow 的影响

必须设置阈值

阈值计算

与其它定位值的对比

常见应用场景

场景 1：吸顶导航

场景 2：表格表头固定

场景 3：侧边栏固定

场景 4：文章章节标题

总结

点我分享笔记

菜鸟教程 -- 学的不仅是技术，更是梦想！

CSS3 教程

CSS 响应式设计

CSS 参考手册

CSS position: sticky 属性值

基本语法

工作原理

阶段 1：正常滚动（相对定位）

阶段 2：固定显示（固定定位）

阈值条件

核心特性

特性 1：双向行为

特性 2：不需要父元素设置定位

特性 3：父容器overflow的限制

特性 4：激活 z-index

实例

示例 1：吸顶导航栏

实例

示例 2：表格标题行固定

实例

示例 3：侧边栏粘性效果

实例

示例 4：分段标题固定

实例

示例 5：双向粘性定位

实例

注意事项

父元素 overflow 的影响

必须设置阈值

阈值计算

与其它定位值的对比

常见应用场景

场景 1：吸顶导航

场景 2：表格表头固定

场景 3：侧边栏固定

场景 4：文章章节标题

总结

点我分享笔记

微信关注