小程序吸顶

<view class="search {{searchFixed? 'fixed':''}}" id="affix">  便当厨房，满30减19</view>

css代码

.fixed{
  width:690rpx;
  position:fixed;
  top:0;
  left:30rpx;
  z-index: 99999;
}

js代码

//页面加载前获取距离顶部高度
  onLoad(){
    let that = this;
    //获取tab的距离顶部高度
    const query = wx.createSelectorQuery();
    query.select('#affix').boundingClientRect(function (res) {
      console.log(res.top)
      that.setData({
        tabTop:res.top
      })
    }).exec();
  },
  //监控scroll
  onPageScroll: function (e) {
    let that = this;
    //tab的吸顶效果
    if (e.scrollTop > that.data.tabTop) {
      if (that.data.searchFixed) {
        return
      } else {
        that.setData({
          searchFixed: true
        })
      }
    } else {
      that.setData({
        searchFixed: false
      })
    }
  },```