写了一个信息录入的界面，录入的内容比较多；

录入内容包括四大块。怎么实现页面内容滚动到相应内容区域时顶部的步骤条也自动改变。

如我滚动到第二块录入内容时，顶部步骤条【第二步】高亮；

滚动到第三块录入内容时，顶部步骤条【第三步】高亮；

滚动到第四块录入内容时，顶部步骤条【第四步】高亮

相应的，当第四块内容离开顶部时，取消第四步高亮，第三步变成高亮，以此类推。

目前我写成一下这样，发现并不能实现我想要的效果，顶部的步骤条无规律乱跳。

顶部步骤条为 vant weapp 组件，van-steps

  onPageScroll:function(e){
  var step_height= this.data.step_height; //步骤条的高度，在onReady里获取。

  let _this=this;
  let query = wx.createSelectorQuery()
  query.select('#thesecond').boundingClientRect( (rect1) => {
      let top = rect1.top
  
      if (top <= step_height) {  //临界值
        _this.setData({
              active: 1,    //设置第二步高亮
          })
      } else {
        _this.setData({
            active: 0,
          })
      }
  }).exec();

  wx.createSelectorQuery().select('#thethird').boundingClientRect( (rect1) => {
    let top = rect1.top

    if (top <= step_height) {  //临界值
      _this.setData({
            active: 2,    //设置第3步高亮
        })
    } else {
      _this.setData({
          active: 1,
        })
    }
}).exec();
  query.select('#theforth').boundingClientRect( (rect2) => {
      let top = rect2.top
   
      if (top <= step_height) {  //临界值
        _this.setData({
              active: 3,    //设置第4步高亮
          })
      } else {
        _this.setData({
            active: 2,
          })
      }
  }).exec();
  }