小程序实现页面上滑固定菜单栏吸顶功能（sticky）

通过scroll-view 以及position:sticky实现小程序吸顶功能
正常展示：

image.png

吸顶展示：

image.png
实现代码：
js

Page({
  onLoad() {
  },
  data: {
    scrollEnabled: true,
    isTriggered: false
  },

  handleRefresher(e) {
    wx.showLoading({
      title: '刷新中'
    })
    setTimeout(() => {
      this.setData({
        isTriggered: false
      })
      wx.showToast({
        title: '加载完成'
      })
    }, 1500)
  },
  toUpper(e) {
    console.log(e)
  },
  toLower(e) {
    console.log(e)
  }
})

wxml:

<scroll-view
  scroll-y="{{scrollEnabled}}"
  style="height: 100vh;"
  refresher-triggered="{{isTriggered}}"
  bindrefresherrefresh="handleRefresher"
  refresher-enabled="true"
  bindscrolltoupper="toUpper"
  bindscrolltolower="toLower"
>
  <view>
    <view class="scroll-top"></view>
    <view class="scroll-tab sticky"></view>
    <view class="scroll-cont" wx:for="{{100}}" wx:key="index">content</view>
  </view>
</scroll-view>

wxss:

.scroll-top {
  height: 100rpx;
  background: #59ac80;
}
.sticky{
  position: sticky;
  top:0
}
.scroll-tab{
  width: 100%;
  height: 80rpx;
  background: #FF3F29;
}
.scroll-cont {
  line-height: 100rpx;
  border-bottom: 1rpx solid #f5f5f5;
  text-align: center;
}