还是比较常见的这种效果，就是用户在页面中一直往下滚动，上面的有些操作按钮 要在滚动消失后 ，悬浮在底部 ，回去的时候重新隐藏掉

这个就涉及到两个知识点了，一个就是 元素距离顶部的距离 另一个就是监听页面的滚动

监听页面滚动的好说

onPageScroll(e) {
	// e.scrollTop 获取页面的滚动高度
	this.show = e.scrollTop >= this.scrollTop;
},

主要还是获取元素距离顶部的距离这个
首先我们可以给元素设置一个标识

<view id="demo"><view>

uni.createSelectorQuery() uni自带的的方式 （其实还是针对于微信小程序又封装了一层，原生小程序也有这个东西）

let query = uni.createSelectorQuery().in(this);
query.select('#demo').boundingClientRect(data => {
	console.log(‘元素距离顶部的距离’ + data.top)
	// 这个 
}).exec();

结合上面我们写的那个滚动监听的方法。就可以实现了

关注我 持续更新 前端知识