小程序的导航栏动态响应

效果要求：
1.导航栏滑动至上方某固定位置时，固定在上方。
2.当下拉屏幕至一定高度时，解锁导航栏，随页面一起滑动
3.点击导航栏功能模块标题，页面滑动至具体功能模块位置

思路：
wxml写两个相同的导航栏，一个属性为fixed，一个static
当导航模块滑动至锁定位置时，wx:if显示固定的模块（position: fixed）。并将static的导航栏用底色覆盖（防止同时显示两个导航栏）
当static导航栏的父元素（第一锚点）锚点值减去头部高度（小程序有个头部算入页面）的差值小于当前页面滚动的值（onPageScroll的e.scrollTop，从0开始），显示fixed导航栏。反之不显示。

1. 计算各个功能模块锚点的位置和第一锚点的位置

// currentScroll 当前位置滚动参数值
const query = wx.createSelectorQuery();
query.select('#firstPoint').boundingClientRect(rect => {
	firsrAnchor = rect.top + currentScroll // 下面5中的意思就是这个
}).exct();
...

2. 计算头部和固定部分的高度

const query = wx.createSelectorQuery();
query.select('#navigator').boundingClientRect(rect => {
	height = rect.height
}).exct();
...

因为之前有这两个的数据，本需求没有用到计算的方式。

3. 点击跳转至对应（锚点-固定部分高度-头部高度）使用wx.pageScrollTo滚动

4. 比对当前位置和（第一锚点-头部高度）决定是否显示fixed导航栏，在onPageScroll生命周期中

5. 若锚点位置受影响（锚点+当前位置滚动参数）