微信小程序吸顶布局

npm install @miniprogram-component-plus/sticky

css3的 position属性有一个 sticky值。粘布局，相对于父元素布局。并不脱离文档流。设置的top值只在粘性布局生效的时候生效。需要注意的是没有父元素的情况下，将不会生效。

参考代码
wxml

<view class="container"> 
  <view class="header">我是头部</view>
  <view 
    wx:for="{{list}}"
    wx:key="index"
    class="list-item">
      {{item}}
    </view>
</view>

wxss

/* pages/list/list.wxss */
.container {
  top: 300rpx;
  min-height: 200px;
  background-color: aquamarine;
  position: relative;
}
.header {
  position: sticky;
  top: 100rpx;
  z-index: 100;
  font-size: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150rpx;
  background-color: burlywood;
}
.list-item {
  height: 100rpx;
  width: 750rpx;
  text-align: center;
  font-size: 50rpx;
  background-color: violet;
  border: 1rpx solid white;
  border-radius: 20rpx;
}

js

    this.setData({
      list: Array(100).fill(0).map((_, i) => i)
    })

效果
吸顶前

吸顶后

小程序对css3的支持是比较全面的可以放心使用。