微信小程序的吸顶效果

吸顶效果如下图所示：

-------------------华丽丽的的分割线-------------------

要吸顶的元素：

<view id="luyou" class="{{flag?'active':''}}">
  <view>aa</view>
  <view>bb</view>
  <view>cc</view>
  <view>dd</view>
</view>

首先，要了解如何获取元素的相关属性：

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标
      rect.top     // 节点的上边界坐标
      rect.bottom  // 节点的下边界坐标
      rect.width   // 节点的宽度
      rect.height  // 节点的高度
}).exec()

然后：
1、先获取要吸顶的元素的高度：

wx.createSelectorQuery().select('#luyou').boundingClientRect(rect => {
      // console.log(666, rect.top)
      this.setData({
        top:rect.top
      })
    }).exec()

2、监控页面滚动时，随时获取页面向上滚动的距离并判断是否已经超出元素距离顶部的高度，若超出，令data中的flag=true：`

  onPageScroll(e){
    if (e.scrollTop > this.data.top){
      console.log("可以吸顶啦")
      this.setData({
        flag:true
      })
    }else{
      console.log("不需要吸顶啦")
      this.setData({
        flag:false
      })
    }
  },

3、flag=true时，令元素的position属性为fixed，这里是为true时调用class为active的类名。

 class="{{flag?'active':''}}"

.active{
  width: 750rpx;
  position: fixed;
  top: 0;
  background: pink;
}