<!-- 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;}