轮子之vue-sticky

sticky，顾名思义，就是在页面内容滚动时，它将作为一部分内容一起滚动，当滚动到一定位置，悬浮于文档流不再滚动，而滚动回来，又会作为文档流的一部分一起滚动。
需求很好满足，难点在于发现 bug。

1. 基本思路

1. 当 sticky 在文档流滚动时，触发 scroll 事件，
2. 对比滚动高度，判读是否应该悬浮于文档流不再滚动；
3. 若出现 sticky，则position: fixed;，并设置 top、width、height。

2. 判断是否 sticky

image.png

1. window.scrollY：文档流滚动高度
2. sticky.top： sticky 到窗口上边缘的距离
3. distance：设置用户滚动到什么位置才悬浮
   window.scrollY、sticky.top 是会变化的，但window.scrollY + sticky.top一定是固定值；
   当window.scrollY + sticky.top - distance < window.scrollY 就应该悬浮于文档流了。

3. 填坑

在用 vue 造轮子 sticky 时，写完基本功能，发现 bug 到最终解决方案记录如下：

1. bug1:
   this.$refs.sticky.getBoundingClientRect().top，到显示屏上边框的距离会随着滚动而变化，window.scrollY也会随着滚动而变化，不难发现top+window.scrollY的值是不变的 (top 值也能为负)。
   解决：在 mounted 就获取一次top+window.scrollY的值，成为固定值，来与 window.scrollY 作比较，从而判断出 sticky 什么时候悬浮。

2. bug2:
   当要 sticky 时，其元素为浮动元素 (position:fixed)，没有占位，例下图，本来浏览器是能显示 9 行，在没有滚动前：浏览器能显示 8+1 行 (包括还没有 sticky 之前这一行的元素)。那么滚动浏览器页面：第一行就会变成 sticky 浮动起来，但是浏览器已经滚动到显示 9 行，原本浏览器就是可以包含 9 行，那么滚动条就会消失，既然这个时候不能滚动了，那就不要 sticky 了，所以滚动时 sticky 就会进入一个变与不变的死循环里。

   image.png

   解决：给 sticky 多加一层 div 设置高度进行占位，设置这个 div 的高度为 sticky 的 this.$refs.sticky.getBoundingClientRect().height

3. bug3:
   以上解决方案会引发另外一个 bug，当我们网速很慢时，sticky 的内容又含有图片，那么图片还没加载出来就已经获取了 sitcky 的高度，那么获取的一定是错误的高度。
   解决：在监听 window 滚动时再去设置占位 div 的高度，判断出要 sticky 之前设置占位 div 的高度。

let scrollY = window.scrollY
let {height, top} = this.$refs.sticky.getBoundingClientRect()
if (scrollY <  top + scrollY) {
  this.sticky = false
} else {
  this.$refs.stickyWrapper.style.height = height + 'px'
  this.sticky = true
}

4. bug4：
   sticky 的父组件如果设置了宽度，并且让其在页面居中，那么滚动时，sticky 浮动起来后 left 如果不设置的话，会超出去
   解决：用 js 来动态获this.$refs.sticky.getBoundingClientRect()来设置 sticky 的 css:left 和 width

4. 贴上代码：

https://github.com/fanlelee/gulu/blob/master/src/sticky.vue