微信小程序自定义顶部导航，滚动页面顶部导航颜色渐变

要实现微信小程序自定义顶部导航，滚动页面顶部导航颜色渐变，可以按照以下步骤进行操作：

1. 在 app.json 文件中设置 "navigationStyle": "custom"，表示自定义导航栏样式。

2. 在页面的 wxml 文件中添加一个 view，作为自定义导航栏的容器。例如：

WXML

<view class="navbar">
  <view class="navbar-title">页面标题
</view class="navbar-title"></view class="navbar">

3. 在页面的 wxss 文件中设置自定义导航栏的样式。例如：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
 
.navbar-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  line-height: 44px;
}

4. 在页面的 js 文件中监听页面滚动事件，根据滚动距离动态修改导航栏的样式。例如：

Page({
  data: {
    navbarOpacity: 0
  },
  onPageScroll: function (e) {
    let scrollTop = e.scrollTop
    let opacity = scrollTop / 100 // 根据实际需求修改透明度计算方式
    this.setData({
      navbarOpacity: opacity
    })
  }
})

5. 在页面的 wxss 文件中根据滚动距离动态修改导航栏的样式。例如：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 44px;
  background-color: rgba(255, 255, 255, {{navbarOpacity}});
  border-bottom: {{navbarOpacity > 0 ? '1px solid #eee' : 'none'}};
}
 
.navbar-title {
  font-size: 18px;
  font-weight: bold;
  color: rgba(51, 51, 51, {{navbarOpacity}});
  text-align: center;
  line-height: 44px;
}