還是比較常見的這種效果，就是用戶在頁面中一直往下滾動，上面的有些操作按鈕 要在滾動消失后 ，懸浮在底部 ，回去的時候重新隱藏掉

這個就涉及到兩個知識點了，一個就是 元素距離頂部的距離 另一個就是監聽頁面的滾動

監聽頁面滾動的好說

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();

結合上面我們寫的那個滾動監聽的方法。就可以實現了

關注我 持續更新 前端知識