微信小程序滚动监听、导航滚动到一定位置固定

wxml

<scroll-view style="width:100%;height: 100%;" scroll-y="true" >
      <view  class="t-com title {{scrollTop > 50 ? 'topnav' : ''}}">
         <block wx:for="{{topNav1}}"wx:key="*this">
            <view class="nav-a" >
              <image class="nav-image" src="{{item.imageUrl}}" mode="aspectFit"></image>
              <text class="nav-text">{{item.text}}</text>
            </view>
        </block> 
     </view>   
</scroll-view>

js

data: {  
    topNav1:[
      {
        "imageUrl":"/image/topNav/sqgx.png",
        "text":"社区供销",
      },{
        "imageUrl":"/image/topNav/mrsx.png",
        "text":"每日生鲜"
      },{
        "imageUrl":"/image/topNav/xzdh.png",
        "text":"县长带货"
      },
      {
        "imageUrl":"/image/topNav/zbzd.png",
        "text":"周边找店"
      },
      {
        "imageUrl":"/image/topNav/xgj.png",
        "text":"小管家"
      } ]
},
 onPageScroll(e){
    //console.log(e)
    //获取滚动距离
    let _this = this;
     let Top = e.scrollTop;
    //console.log(e.scrollTop);
    //console.log(Top);
    //将滚动距离（位移）动态添给滚动条的Top
    _this.setData({
      scrollTop:Top
   })
  }

wxss

.t-com{
  background-color: white;
  width: 100%;
  height: 75px;
}
.nav-a{
  display: inline-block;
  width: 20%;
  height: 75px;
  float: left;
}
.nav-image{
  width: 100%;
  height: 55px;
  float: left;
}
.nav-text{
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  height: 20px;
  margin-bottom: 5px;
  float: left;
}
.topnav{
  position: fixed;
  top: 0;
  z-index:99;
  background: #fff;
  width: 100%;
}