通讯录式的吸顶效果

通讯录式的吸顶效果，当前bar固定在顶部

方法一： js 监听 onscroll 事件

• 实现原理

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 更新

方法二：position: sticky

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