微信小程序（13）--页面滚动到某个位置添加类效果

<!-- vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = % * 视口高度 -->
<scroll-view scroll-y="true" style="height:100vh;" bindscroll="scroll" scroll-top="{{scrollTop}}">
<view>
.微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
</view>
<view>
.微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
</view>
<view>
.微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
</view>
<view>
.微信小程序（wei xin xiao cheng xu），简称小程序，缩写XCX，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
</view>
<view class="{{scrollY>100 ? 'topnav' : ''}}">
topnav是希望页面滚动大于100添加类。变成置顶导航。
</view>
</scroll-view>

Page({ /**
* 页面的初始数据
*/
data: {
scrollTop:'',
scrollY:''
},
//滚动监听
scroll: function (e) {
var that = this;
that.setData({
scrollY: e.detail.scrollTop
})
// console.log(this.data.scrollY)
}
)}

.topnav{position: fixed;top:;left:;width:%;background: #fff;padding:10px ;color:#f40;}