粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 10px;
}
简介
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
- 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 偏移值不会影响任何其他元素的位置。该值总是创建一个新的层叠上下文（stacking context）。
- sticky元素会固定在离它最近的一个拥有滚动机制的祖先上，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量。
可能存在的不生效的情况
未指定 top, right, top 和 bottom 中的任何一个值
此时，设置 position: sticky 相当于设置 position: relative
垂直滚动时，粘性约束元素高度小于等于 sticky 元素高度
当粘性约束元素滚出视口时，sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小，sticky 元素没有显示固定定位状态的机会。
粘性约束元素和容器元素之间存在 overflow: hidden 的元素
滚动元素有多个sticky
当有多个sticky元素时，会一次触发各自的position:fixed，如果有影响，后面的会覆盖前面元素。当然您可以设置z-index: num;调整层级。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.content {
height: 2000px;
}
.header {
height: 200px;
background-color: #000080;
}
.m-sticky{
position: sticky;
height: 100px;
top:0;
background-color: #F0DB88;
z-index: 0;
}
.m-sticky2{
position: sticky;
height: 50px;
top:0;
background-color: #FF00FF;
z-index: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="header"></div>
<div class="m-sticky"></div>
<div class="m-sticky2"></div>
</div>
</body>
</html>
