小程序的吸顶效果

由于工作开发需要，页面上会有吸顶效果。在官方和社区都没有完美解决方案(提供一些思路)后，自己尝试做一些解决方案，但是效果并没有那么完美。原以为只能这样了。
但看到美团外卖的首页效果特别好，所以就重新换个思路解决了一下。感觉还可以，希望能一起讨论的。

首先页面布局都在<scroll-view></scroll-view>里面，宽高都应该是100%,具体看你自己的原型稿。
接下来就是放置需要吸顶效果的元素。
在onLoad()里面获取该元素的top
   var query = wx.createSelectorQuery()//创建节点查询器 query
   //这段代码的意思是选择Id= the - id的节点，获取节点位置信息的查询请求
   query.select('#home-tab-list').boundingClientRect()
   query.exec(function (res) {
      that.setData({
         homeTop: res[0].top
      })
   });
ps:在onShow里面监听该元素的top值，在第一次和后面进入时数值不一致。希望有人解惑一下。
最后就是bindscroll的监听事件：
 homeScroll: function(event) {
   let that = page;
   // 注意吸顶元素上面是否有固定位置的元素
   if(event.detail.scrollTop > that.data.homeTop){
     that.setData({
       isFixed: true
     });
   }else{
     that.setData({
       isFixed: false
     });
   }
 }
wxml及wxss就不过多解释了。

结束。。。