微信小程序实现吸顶效果

先看一下效果

js

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

wxml

<!-- 店铺导航 S -->
	<view class="menu-bar {{oneFixed}}" id="tab">
		<block wx:for="{{menu}}" wx:key="index">
			<text class="{{indexs == index? 'active': ''}}" bindtap="chooseMenu" data-index="{{index}}">{{item}}</text>
		</block>
	</view>
	<!-- 店铺导航 E -->

最后wxss

/* 吸顶 */
.Fixed {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

/* 吸顶结束 */

如果对你有帮助,请关注一下博主的小程序支持一下, 在此谢谢了