微信小程序自定义导航栏下滑出现上滑隐藏

wxml文件

<!--pages/index/goodsdetails/goodsdetails.wxml-->
<view>
  <view class="indextop {{scrollTop > 10 ? 'navstyl':'unnavstyl'}}">
    <view style="height:{{statusBarHeight}};"></view>
    <view style="height:{{navheight}};padding:6px 0;display: flex;line-height: 32px;">
      <view style="width:80rpx;opacity:1">《</view>
      <view class="xiangqi {{scrollTop > 10 ? 'xiangqi':'unxiangqi'}}">商品详情</view>
      <view style="width:80rpx"></view>
    </view>
  </view>
</view>
<view>
  <image src="../../../img/topimg.png"></image>
  <image src="../../../img/topimg.png"></image>
  <image src="../../../img/topimg.png"></image>
</view>

wxss文件

/* pages/index/goodsdetails/goodsdetails.wxss */
.indextop{
  position: fixed;
  top: 0;
  right: 0;
  width: 750rpx;
  z-index: 9999;
}
.navstyl{
  background: #ffffff;
  transition: all 1.5s;
}
.unnavstyl{
  transition: all 1.5s;
}
.xiangqi{
  transition: all 1.5s;
  opacity: 1;
  text-align: center;
  flex: 1;
}
.unxiangqi{
  transition: all 1.5s;
  opacity: 0;
  text-align: center;
  flex: 1;
}

js文件

Page({
  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight:0,
    navheight:0,
    pagetop:0,
    scrollTop:0,
    numop:0
  },
  onLoad: function (options) {
    this.setData({
       状态栏的高度
      statusBarHeight:wx.getSystemInfoSync()['statusBarHeight'] + 'px',
       胶囊的高度 也就是自定导航栏的高度
      navheight:wx.getMenuButtonBoundingClientRect()['height'] + 'px',
       状态栏加导航栏的高度 加上下的padding的高度 12
       pagetop:wx.getMenuButtonBoundingClientRect()['height'] + wx.getSystemInfoSync()['statusBarHeight'] + 12 + 'px',
    })
    console.log(this.data.statusBarHeight)
    console.log(this.data.navheight)
    console.log(this.data.pagetop)
  },
  onPageScroll(e) {//页面滚动就会触发
    this.setData({
      scrollTop:e.scrollTop
    })
  },
})

json文件

{
  "navigationStyle": "custom"
}

效果