轮子之vue-sticky-CFANZ编程社区

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

1. 基本思路

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

2.判断是否sticky

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

3. 填坑

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

bug1:
this.$refs.sticky.getBoundingClientRect().top，到显示屏上边框的距离会随着滚动而变化，window.scrollY也会随着滚动而变化，不难发现top+window.scrollY的值是不变的(top值也能为负)。
解决：在mounted就获取一次top+window.scrollY的值，成为固定值，来与window.scrollY作比较，从而判断出sticky什么时候悬浮。
bug2:
当要sticky时，其元素为浮动元素(position:fixed)，没有占位，例下图，本来浏览器是能显示9行，在没有滚动前：浏览器能显示8+1行(包括还没有sticky之前这一行的元素)。那么滚动浏览器页面：第一行就会变成sticky浮动起来，但是浏览器已经滚动到显示9行，原本浏览器就是可以包含9行，那么滚动条就会消失，既然这个时候不能滚动了，那就不要sticky了，所以滚动时sticky就会进入一个变与不变的死循环里。

解决：给sticky多加一层div设置高度进行占位，设置这个div的高度为sticky的this.$refs.sticky.getBoundingClientRect().height
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
}