通讯录式的吸顶结果

通讯录式的吸顶结果，当前bar牢固在顶部

• 完成道理

1. 吸顶的谁人 bar 实际上是一个定位在屏幕最上的一个元素，把下面 各个区块的高度累加放到一个数组里 [0, 740, 990, 1310, ...]
2. 拿当前转动体滚过的距拜别上面的数组里找对应的区间，然后将 bar 的笔墨添补进去
3. 拿地点区间的 上限值 - 转动值 = 偏移量
4. var fixedTop = (diff > 0 && diff <40) ? diff - 40 : 0
5. 依据上面 fixedTop 设置偏移量 fixedDom.style.transform = translate3d(0, ${fixedTop}px, 0)

• 详细代码以下

猎取转动体滚过的间隔 参考链接

const el = document.scrollingElement || document.documentElement
const top = el.scrollTop

• 题目以下

1. 在混淆形式下，由于一切浏览器均运用 document.body.scrollTop 猎取页面的垂直转动条的位置，所以不会涌现兼容性题目。
   而在规范形式下，由于 Chrome 与 Safari 依然运用 document.body.scrollTop，而关于 document.documentElement.scrollTop 返回为 0。
2. 趁便再说说 document.scrollingElement 这个属性。多是浏览器厂商们也以为如今的页面转动元素太乱，一会儿 BODY 一会儿 HTML，跟页面形式有关，还跟 Webkit 的遗留 BUG 有关，因而搞出来这么个东西。依据 MDN 的引见：
3. Document 的 scrollingElement 是一个只读属性，一直指向页面转动元素

各个区块的高度盘算 参考文章

var listGroup = $cls('.list-group-item')
let height = 0
this.listHeight.push(height)
listGroup.forEach(item => {
height += item.clientHeight
this.listHeight.push(height)
})

• clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop 的区分

1. clientHeight和offsetHeight属性和元素的转动、位置没有关系它代表元素的高度，个中：
   clientHeight：包含padding但不包含border、程度转动条、margin的元素的高度。关于inline的元素这个属性一直是0，单元px，只读元素。

   offsetHeight：包含padding、border、程度转动条，但不包含margin的元素的高度。关于inline的元素这个属性一直是0，单元px，只读元素。

2. scrollHeight
scrollHeight: 由于子元素比父元素高，父元素不想被子元素撑的一样高就显现出了转动条，
   在转动的过程当中本元素有部份被隐蔽了，scrollHeight代表包含当前不可见部份的元素的高度。

   而可见部份的高度实在就是clientHeight，也就是scrollHeight>=clientHeight恒建立。

   在有转动条时议论scrollHeight才有意义，在没有转动条时scrollHeight==clientHeight恒建立。单元px，只读元素

3. scrollTop: 代表在有转动条时，转动条向下转动的间隔也就是元素顶部被遮住部份的高度。在没有转动条时scrollTop==0恒建立。单元px，可读可设置。
4. offsetTop: 当前元素顶部间隔近来父元素顶部的间隔,和有无转动条没有关系。单元px，只读元素。

2019-07-09 更新

sticky: 粘性规划，基本上，能够看做是 position: relative 和 position: fixed 的结合体 ——当元素在屏幕内，表现为 relative ，就要滚出显现器屏幕的时刻，表现为 fixed

对元素设置：
position: -webkit-sticky;
position: sticky;
top: 0; // 摆布也能够设置 left

• 上栗的吸顶结果能够用 sitcky 完成

// 将上述代码改成 以下即可，注重其先人元素不可有 overflow: visible 之外的元素
.list-group-title {
postion: sticky;
top: 0;
}

• 注重事项：

  1. 父级元素不能有任何 overflow: visible 之外的设置，不然就没有粘滞结果
  2. 父级元素不能设置牢固的 hight 高度值
  3. 同一个父容器中的 sticky 元素，假如定位值雷同，则会堆叠；假如属于不同父元素，则会鸠占鹊巢，挤开本来的元素，顺次构成占位结果。（吸顶结果）
  4. sticky 定位，不仅能够设置 top，基于 转动容器上边缘定位；还能够设置bottom，left，right
• sticky 参考张鑫旭大佬的文章 sticky