uniapp实现微信小程序吸顶效果

当我们页面滑动到一定位置的时候，让这个组件固定，之后再滑动到一定位置时候，回归原页面，还有点击立即到最顶部效果

如果是移动端的话，可以用一个position: sticky;不过要考虑兼容性

比如，让这个元素进行吸顶展示：

<view class="tabs" id="boxFixed" :class="{'is_fixed' : isfixed}">
	<u-tabs :list="list4" @click="clickTabs"></u-tabs>
</view>

 data(){
   return{
      menutop：''  //组件距离顶部的距离
   }
 }
 	// 吸顶
.is_fixed {
	position: fixed;
	left: 0;
	top: 60rpx;
	right: 0;
}

监听元素到顶部的距离

onLoad() {
	// 监听筛选组件距离顶部的距离
	const query = uni.createSelectorQuery()
	query.select('#boxFixed').boundingClientRect()
	query.exec((res) => {
		console.log(res)
		this.menutop = res[0].top
	})
},

监听页面滚动的距离

// 监听页面滚动距离
onPageScroll(e) {
	// 如果页面滚动的高度大于筛选组件距离顶部的高度，那就置顶，反之不置顶
	if (e.scrollTop > this.menutop) {
		this.isfixed = true
	} else {
		this.isfixed = false
	}
},

点击这个组件，它立即回到顶部

   <view @click="poll()" :catchtouchmove="true">
		<Delicacy id="boxFixed" :class="{'is_fixed' : isfixed}"></Delicacy>
	</view>

   data(){
      return{
       topdata:''
     }
  }
   methods:{
     // 回到顶部
			poll() {
				uni.pageScrollTo({
					scrollTop: this.topdata + 2,
					duration: 300
				})
			},
   },
   onLoad() {
		// 监听筛选组件距离顶部的距离
		const query = uni.createSelectorQuery()
		query.select('#boxFixed').boundingClientRect()
		query.exec((res) => {
			this.topdata = res[0].top
		})
	},