小程序滚动事件之头部渐隐渐现demo

效果图:

==>

 代码:

//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;
   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
      })
    }
  }

})

 参考链接:https://blog.csdn.net/bright2017/article/details/82819028