sticky，顾名思义，就是在页面内容滚动时，它将作为一部分内容一起滚动，当滚动到一定位置，悬浮于文档流不再滚动，而滚动回来，又会作为文档流的一部分一起滚动。
需求很好满足，难点在于发现bug。
1. 基本思路
- 当sticky在文档流滚动时，触发scroll事件，
- 对比滚动高度，判读是否应该悬浮于文档流不再滚动；
- 若出现sticky，则
position: fixed;，并设置top、width、height。
2.判断是否sticky
image.png
- 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就会进入一个变与不变的死循环里。
image.png
解决：给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
}
- bug4：
sticky的父组件如果设置了宽度，并且让其在页面居中，那么滚动时，sticky浮动起来后left如果不设置的话，会超出去
解决：用js来动态获this.$refs.sticky.getBoundingClientRect()来设置sticky的css:left和width
