粘性定位

postion 属性值共有6个：

1. position: static // 默认值
2. position: inherit // 继承父元素的postion值
3. position: relative // 相对定位，遵循文档流
4. position: absolute // 绝对定位，脱离文档流
5. position: fixed // 固定定位
6. position: sticky // 粘性定位

sticky是CSS规范中新加入的一个属性值。
这个属性值的作用表现为当一个列表元素位于一个可滚动区域内时，当滚动到特定的位置，例如顶部的时候，就会触发fixed特性，固定在顶部这样。
粘性定位的应用场景随处可见，例如segmentfault的文章页面中，顶部的导航条就使用了sticky。或者很多新闻类的app里面的粘性标题栏等等。

代码示例：

HTML

<main>
       <header>标题一</header>
       <div class="content">
       </div>
       <header>标题二</header>
       <div class="content">
       </div>
       <header>标题三</header>
       <div class="content">
       </div>
       <header>标题四</header>
       <div class="content">
       </div>
   </main>

CSS

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}

JS

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
let contentsDom = document.getElementsByClassName('content')
let contentsArr = [...contentsDom]
contentsArr.forEach(item => {
    item.innerHTML = html
})