//test1.wxml

<view class='header' style="opacity:{{opacityStyle}}" hidden='{{hiddenModel}}'>   头部

</view>

<view class='demo1'>滑动1</view>

<view class='demo2'>滑动2</view>

//test1.wxss

.demo1,.demo2{

  height: 500px;

  background: #ccc

}

.demo2{

  background: #f2f2f2

}

.header{

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  background: red;

  height: 100rpx

}

//test1.js

// pages/test1/test1.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    scrollTop: 0,

    hiddenModel:true,

    opacityStyle: 0

  },

  //监听屏幕滚动 判断上下滚动

  onPageScroll: function (ev) {

    var _this = this;

    if (ev.scrollTop > 10) {

      let opacity = ev.scrollTop / 140

      console.log(opacity)

      opacity = opacity > 1 ? 1 : opacity

      _this.setData({

        hiddenModel: false,

        opacityStyle: opacity

      })

    } else {

      _this.setData({

        hiddenModel: true

      })

    }

  }

})