微信小程序做一个页面滚动到某一个元素时固定粘附导航栏

标题1.先在wxml里面给元素一个id或者直接class也行

把这个写在onload函数里面这个样一加载就知道你那个元素距离顶部的距离了把他存在data里面

wx.createSelectorQuery().selectAll('.headerhehe').boundingClientRect(function(rect){
console.log(rect) 
that.setData({
topheight:rect[0].top
})
}).exec();

wx.createSelectorQuery():这个方法是小程序的节点查询方法既是小程序dom元素节点查询返回一个SelectQuery对象实例然而SelectQuery是查询节点信息的对象它的下面主要有五个方法
SelectQuery的五个方法

方法一：SelectQuery.in（）将选择器的选取范围更改为自定义组件 component 内。
方法二：SelectQuery.select（string selector）在当前页面下选择第一个匹配选择器 selector 的节点。返回一个 NodesRef 对象实例，可以用于获取节点信息。
方法三：SelectQuery.selectAll（string selector）在当前页面下选择匹配选择器 selector 的所有节点。
方法四：SelectQuery.selectView（）选择显示区域。可用于获取显示区域的尺寸、滚动位置等信息。
方法五：SelectorQuery.exec(function callback) 执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

标题2.SelectorQuery NodesRef.boundingClientRect(function callback)

第二步selectorquery就是createselectorquery（）方法返回的实例对象，对象在用它下面的五个方法返回的nodesref对象然后添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。例如

wx.createSelectorQuery().select(’#the-id’).boundingClientRect(function(rect){
rect.id // 节点的ID
rect.dataset // 节点的dataset
rect.left // 节点的左边界坐标
rect.right // 节点的右边界坐标
rect.top // 节点的上边界坐标
rect.bottom // 节点的下边界坐标
rect.width // 节点的宽度
rect.height // 节点的高度
}).exec()

回调给了一切信息

标题3.下面是实时监控屏幕滚动距离顶部的位置做出判断

// 实时监控滚动距离顶部的位置
onPageScroll:function(e){
var that = this
if(e.scrollTop>=that.data.topheight){
that.setData({
hehe:true
})
}else if(e.scrollTop<that.data.topheight){
that.setData({
hehe:false
})
}
},

如果到了存在data里面的那个距离就把wxss里面那个提前position：flex的样式变成true