uni-app页面滑到一定距离固定某个元素在顶部，如导航栏

需要固定的元素加上动态样式绑定

:style="isTop == 1 ? ‘position:fixed;background:#FFFFFF;z-index:9;top:0‘ :‘‘"   

变量istop要定义在data中，默认0

页面生命周期mouted,和onLoad同一层级，

mounted() {
console.log(‘mounted 组件挂载完毕状态===============》‘);
const query = uni.createSelectorQuery().in(this);
query.select(‘#scrollView‘).boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
this.myScroll = data.top
}).exec();
},

这个#scrollView，此id是你需要固定的元素最外层id,这个方法的意义是针对于不同尺寸屏幕的手机的元素距离不同

onPageScroll:function(e){

if(e.scrollTop > this.myScroll){
this.isTop = 1
}else{
this.isTop = 0
}
},

这个j监听页面滚动距离，和onload同级，

当滚动距离超过元素距离页面顶部的距离时，就将是否定位改为true，否则就为false

完成

uni-app页面滑到一定距离固定某个元素在顶部，如导航栏

原文：https://www.cnblogs.com/lishuang2243/p/12487746.html