实现微信小程序吸顶效果

效果图

wxml代码：

<view class="xiding {{oneFixed}}" id="tab">  
   <van-row custom-class="goods_row" >       
     <van-col span="12" custom-class="title-1">
        食疗方法      
     </van-col>
      <van-col span="12" custom-class="title-2" >      
        动作方法     
     </van-col>
   </van-row>
</view>

wxss代码：

/* 吸顶开始 */
.xiding
{
width: 100%;
height: 30px;
background:  white;
}
.title-1
{
  text-align: center;
}
.title-2
{
   text-align: center;
}
/* 吸顶 */
.Fixed
{
  position:  fixed;
  top: 0;
  z-index: 2;
}
/* 吸顶结束 */

wxjs代码：

oneFixed:"",
    tabTop:"0",
    // 吸顶动态监听函数
onPageScroll:function(event)
{
  console.log(event.scrollTop > this.data.tabTop)
  if(event.scrollTop>this.data.tabTop)
  {
    if(this.data.tabFix)
    {
      return
    }
    else{
      this.setData({
        oneFixed:"Fixed"//添加吸顶类
      })
    }
  }
  else
  {
    this.setData({
      oneFixed:''
    })
  }
},


/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let This=this;
     const query=wx.createSelectorQuery();
     query.select('#tab').boundingClientRect(function(res)
     {
       This.data.tabTop=res.top//255
     }
     ).exec();
  },