要实现微信小程序自定义顶部导航，滚动页面顶部导航颜色渐变，可以按照以下步骤进行操作：
1. 在 app.json 文件中设置 "navigationStyle": "custom"，表示自定义导航栏样式。
2. 在页面的 wxml 文件中添加一个 view，作为自定义导航栏的容器。例如：
WXML
页面标题
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;
}
以上就是实现微信小程序自定义顶部导航，滚动页面顶部导航颜色渐变的详细步骤和代码示例。
