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

wxml

      
         
            
              
              {{item.text}}
            
         
        

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%;
}