轮子之vue-sticky

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

在用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
   贴上代码：
   https://github.com/fanlelee/gulu/blob/master/src/sticky.vue