基于vue页面的多个标题滑动吸顶与多选分页加载

      最近做一个需求，产品要求一个发票列表可以多选发送到邮箱，而且分页加载，并且按照月份排序，滑动的时候月份的部分吸顶，先看看设计图吧。

     由于整个项目都是基于vue开发的，项目里有的页面是用vux中的scroll组件实现分页的，看文档里这个组件都已经不维护了，所以用的是vue-infinite-scroll组件，分页就不用多说了。

       这里有个多选与全选，如果点了全选，这一页的30条数据被选中，然后滑动翻页了，又出来30条数据，默认没选中，那么这个时候全选就不勾选了，这一块的逻辑都是可以在computed中完成的。其实做这个博客记载的，主要是记录一下多个标题滑动吸顶的功能，最开始就想着直接用以前用过的position: sticky;的，结果发现不行，就想着是不是之前是只有一个需要吸顶的，所以可以做到，现在这个需求有多个标题需要吸顶所以不行了？后来又想着怎么去取每个日期的距离顶部的scrollTop，为零了就把position改成fixed，如果只有一个头部吸顶，这样完全是可行的，document.querySelector('#searchBar').offsetTop直接拿到选中元素的头部的距离，然后window.addEventListener('scroll', this.handleScroll)绑定一个scroll事件去监听，不过querySelector只会返回第一个对象，也没办法取到很多个不同的。然后看到了一篇关于position: sticky;的元素的博客，如果元素sticky了，那么它的父元素的visibility需要是visible，我一看自己页面里面写的父元素的visibility果然是hidden的，所以导致了不能吸顶。
        其实position: sticky就可以简单粗暴的解决吸顶的需求，而且兼容性还不错，不过又有新的幺蛾子，后面吸顶的日期会前面的盖住，直接出现的就是多个日期重叠了，加个z-index就行了吧，列表是个循环，每个日期部分的z-index都可以根据自己的index来动态设置保证比前面的高，不过设计图里的日期背景色是灰色的，吸顶了之后是白色的，要想遮住前面的只能给日期设置背景色灰色，就导致了吸顶后日期有一点点小的灰色的背景，跟产品沟通后，暂时这样来吧，只是以后最好需要吸顶的部分背景色最好跟头部保持一致，这样体验就更好了。废话扯了这么多，还是上代码吧。

     总结一下，代码里面几个要点：1、computed里面isCheckedAll就是用来判断是否全选的逻辑；2、ios和安卓还有两个键盘弹出时不同处理的方式，ios弹出键盘会把页面自动顶上去，所以ios做的处理就是键盘收起后，顶上去的页面自动滚下来，安卓键盘弹出会把弹出层缩小，所以安卓里做的就是键盘弹出时，弹出层高度增加，键盘收起，弹出层高度还原；3、position: sticky的元素--invoice_item_title的父元素--invoice_item_list的visibility一定不能是hidden，哪怕不设置visibility属性都行，否则滑动吸顶无效。