uniapp吸顶效果实现

1、页面代码

<view :class="{'is_fixed':isfixed}" @click="poll" id="boxFixed" >
					<Delicay></Delicay><!--组件-->
				</view>
				<view style="height:3200px">sdffgdfg</view>

2、js代码

data() {
			return {
				rect:'',
				menutop:'',
			}
		},
methods: {
      poll(){
      	wx.pageScrollTo({
      		scrollTop:this.menutop,
      		duration:300
      	})
      }
		},
		onPageScroll(e) {
			this.rect = e.scrollTop
		},
		 mounted() {
			 // 监听筛选组件距离顶部的距离
		   const query = wx.createSelectorQuery().in(this)
			 setTimeout(() => { 
			       query.select('#boxFixed').boundingClientRect(res=>{
			         this.menutop = res.top
			       }).exec();
			     }, 0);
			},
		computed: {
			isfixed(){
				return this.rect > this.menutop
			}
		
		},

3、样式

.is_fixed {position: fixed;left: 15upx;
/* #ifdef H5 */
	top: 44px;
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	right: 15upx;		
}