需求:当用户进行页面的滚动操作,大于一定高度的时候实现吸顶

1.页面初始时获取需要吸顶的元素距离顶部的高度
onload()或onshow()中均可以实现

let me = this;
//获取tab的距离顶部高度
const query = wx.createSelectorQuery();
query.select(‘#tab’).boundingClientRect(function (res) {
// console.log(res.top)
me.data.tabTop = res.top
}).exec();

2.监听用户滚动行为

onPageScroll:function(e){
let me = this;
//tab的吸顶效果
console.log(e.scrollTop > me.data.tabTop)
if(e.scrollTop>me.data.tabTop){
if(me.data.tabFix){
return
}else{
me.setData({
tabFix:’Fixed’
})
}
}else{
me.setData({
tabFix:”
})
}
},

3.wxss样式

.Fixed{
position: fixed;
top: 0;
margin-top: 0;
z-index: 99999;
}

4.页面布局

<scroll-view scroll-x=”true” class=”tab {{tabFix}}” id=”tab” scroll-into-view=”{{intoView}}”>
</scroll-view>