The applet scrolls the page to modify the background color of the navigation bar

The page design is like this.

The page scrolling effect is like this: the title of the navigation bar is blocked,

and finally the background color is realized after scrolling to a certain area.

js code

  onPageScroll: function (e) {
    
     // 获取滚动条当前位置
    if (e.scrollTop > 50) {
    
    
      this.data.rgb == 1 ? '' : this.setData({
    
    
        rgb: 1
      })
    } else {
    
    
      this.data.rgb == 0 ? '' : this.setData({
    
    
        rgb: 0
      })
    }
  },

wxml page