sticky

sticky实现吸顶，元素内滚动吸顶真是太好用了，仔细研究了一下sticky的特性；
先来看下兼容性；chrome有部分不能支持，tr和thead不支持~

image.png

1、sticky简介
sticky可以看成是relative和fixed的结合。当元素在屏幕内，表现为relative，就要滚出屏幕内的时候就表现为fixed
比如要设置某个导航滚动超出的时候定位在屏幕的顶部，只需要给这个导航设置如下css样式即可。

nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

2、sticky相对于谁定位呢？
sticky设置的top/left是相对于第一个可滚动父元素定位的，如果没有可滚动的父元素，那就相对于窗口定位。
可滚动父元素定位是指overflow不为visible的元素。
3、那如果想做一个手机通讯录的首字母吸顶该如何通过sticky实现呢？
dom结构

.scroll-area {
    overflow: auto;
}
.target {
    position: sticky;
    top: 0
}

设置了position:sticky粘性定位的元素的父元素如果高度计算值和粘性定位元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的。
一开始误打误撞就生效了，后来仔细研究才明白是因为这个原因。
主要是滚动的时候sticky元素本身不能脱离粘性约束矩形；（可以理解为粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的left、top、right、bottom属性的偏移计算值后的新矩形的交集。）