微信小程序实现透明渐变导航栏

最近在微信小程序实现透明渐变的导航栏，刚好有接触wxs，所以尝试着用wxs实现。核心代码：

<scroll-view 
  scroll-y style="height: {{pageHeight}}px;background-color: #F5F5F5;" data-value="{{scrollHeight}}"
  bindscroll="{{navigate.pageScroll}}">
</scroll-view>

var pageScroll = function (e, ins) {
  // 传值，图片高度
  var data = {
    imageHeight: e.target.dataset.value
  }
  
  var scrollTop = e.detail.scrollTop
  // console.log('输出高度', scrollTop)

  if (scrollTop >= data.imageHeight) {
    ins.selectComponent('.change-color').setStyle({
      opacity: 1
    })
  } else {
    ins.selectComponent('.change-color').setStyle({
      opacity: Math.max(0, (scrollTop) / data.imageHeight)
    })
  }
}

module.exports = {
  pageScroll: pageScroll,
}

但是，在测试的过程中发现安卓端滑动过快的话，没有监听到滚动到顶部的事件。这个？好办，微信小程序的scroll-view提供了监听滚动到顶部的回调事件。
加上去之后，经过测试，又发现问题，安卓端在慢慢移动的时候，会触发多次滚动到顶部事件（我认为我的代码没问题）。
目前，我暂时能想到的解决办法就是在安卓端设置顶部线条和底部线条，监听线条的显示和离开来实现：

    if(this.data.platform === 'ios') {
      return ;
    }
    this.createIntersectionObserver().relativeToViewport().observe('.scroll-monitor-line', res => {
      if (res.intersectionRatio > 0) {
        this.setData({
          changeOpacity: true
        })
      }
    })
    this.createIntersectionObserver().relativeToViewport().observe('.scroll-monitor-line-leave', res => {
      if (res.intersectionRatio > 0) {
        this.setData({
          changeOpacity: false
        })
      }
    })

原文链接

如果哪位大神有好的办法，不知道可不可以告知一声。