sticky三个应用场景

1. 吸顶导航

<view class="item_title" bindtap="toBack">返回上一页</view>
<view class="item" wx:for='{{10}}' wx:key='index'>{{item+1}}</view>

.item_title {
  width: 700rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #ccc;
  border-radius: 8rpx;
  position: sticky;
  top: 6rpx;
  margin: 25rpx;
}

.item{
  height: 200rpx;
  border-bottom: 2rpx solid #ccc;
  line-height: 200rpx;
  text-align: center;
}

2. 标题推开

  <block wx:for='{{list}}' wx:key='index'>
    <view class="title">{{item.title}}</view>
    <view class="content" wx:for='{{item.content}}' wx:key='index2' wx:for-item='item2' wx:for-index='index2'>{{item2}}</view>
  </block>
  

.title {
  line-height: 80rpx;
  font-size: 38rpx;
  position: sticky;
  top: 0;
  background-color: #ccc;
}

.content {
  line-height: 60rpx;
}

3. 相对父级固定定位

  
<view class='page'>
  <view class="box">
    <view class="box_title">砍价规则</view>
    <view class="box_cotent" wx:for="{{rule}}" wx:key='index'>{{item}}</view>
    <button class="box_btn" type="primary">已了解</button>
  </view>
  <view class="body">占位符</view>
</view>

.box{
  height: 500rpx;
  border: 2rpx solid #ccc;
  margin: 10rpx;
  overflow: scroll;
  padding: 0 20rpx;
}

.box_title{
  text-align: center;
  line-height: 80rpx;
  font-size: 38rpx;
  position: sticky;
  left: 0;
  top: 0;
  background-color: #fff;
}

.box_cotent{
  line-height: 60rpx;
  color: #333;
  padding-bottom: 10rpx;
}

.body{
  line-height: 1500rpx;
  text-align: center;
}

.box_btn{
  position: sticky;
  left: 0;
  bottom: 10rpx;
}

代码片段：

https://developers.weixin.qq.com/s/uTR93LmD7cfM