接上一篇文章的内容，通常在一个页面中部会有一个导航栏查看不同的内容，这篇文章旨在实现在页面下滑的过程中导航栏自动固定到顶部以便我们阅读过程中的切换。
下滑一段距离后自动固定到顶部
首先，思考这个功能应该是怎么实现的： 在页面下滑的过程中，我们希望系统应当能识别下滑了多少距离，当原本的导航栏逐渐被遮住以后（遮住意味着下滑了特定距离），触发这个功能，执行另一种样式，将导航栏固定在页面顶端，同时如果我们将页面往上滑，系统能识别到原来的导航栏能露出来了（即距离顶端的高度小于一个特定的值），这时候又执行最初的样式。
那么系统有没有识别页面滚动距离的功能？就要去开放文档里寻找。
幸运的是微信有这个功能并且我找到了他的官方解释。所以接下来就可以按照前面设想的思路去实现了。
由于上一篇文章导航栏的布局都写好了，所以切记不需要重新写一个导航栏布局，还是一样的思路，只要调整样式就好了。所以我还是利用一个三项选择器让这个导航栏能对应不同的类
<view class="outer {{scrollTop>400?'totop':''}}">
这句话的意思是如果scrollTop得到的值>400，就执行totop这个类，否则就不执行。（400是我根据调试确认的滑动距离）
<view class="outer {{scrollTop>400?'totop':''}}"><block wx:for="{{scrollViewTitle}}"><view class="{{currentIndex==index?'selected':'normal'}}" id="{{index}}" bindtap="changeCurrentIndex">{{item}}</view></block></view>
将这个view包裹在之前写好的导航栏代码外，wxml的部分就写好了。现在关键的是去.wxss文件里构造totop这个类
（ position:fixed 和 top：0 等可以实现将导航栏固定在最顶部）
接着在.js文件里写逻辑，创建一个函数 onPageScroll获取系统识别出的滚动距离scrollTop，赋值给自定义变量scrollTop（仅是同名）以便view里面可以调用这个变量进行三相选择器的比较。
//监听页面滚动onPageScroll:function(e){console.log(e);this.setData({scrollTop: e.scrollTop})},
功能完成，总结一下：
利用scrollTop这个系统自带的功能，可以知道当前滚动距离页面顶部的距离，于是在.js里面创建一个函数来获取它，在wxml文件里的标签view用一个三相选择器选择执行哪一个类，判断标准是scrollTop的值是否大于设定的一个距离。当大于时，执行totop这个类，同时在.wxss文件中设置totop类的样式。
