uniapp中使用uview UI的组件Sticky 吸顶 在H5下报错‘bottom‘ of null。纯css实现吸顶功能。

项目场景：

提示：这里简述项目相关背景：
uniapp中使用uview UI的组件Sticky 吸顶 在H5下报错’bottom’ of null。纯css实现吸顶功能。

---

问题描述

在uniapp中使用uview UI的组件Sticky在H5下报错’bottom’ of null。网上查找了很多，都说产生的原因是：吸顶组件u-sticky和底部导航栏tabbar切换页面时产生冲突

原因分析：

原因是切换页面，页面的sticky的Observer监听没有销毁，所以需要在onHide中将sticky的属性enable设置为false

<template>
	<view>
		<!--  @property {Boolean} enable 是否开启吸顶功能（默认true）-->
		<u-sticky :enable="enable">
			<view>
				……
			</view>
		</u-sticky>
	</view>
</template>
<script>
export default {
	data() {
		return {
			enable: true
		}
	},
	// 在对应的show和hide页面生命周期中打开或关闭监听
	onShow() {
		this.enable= true
	},
	onHide() {
		this.enable= false
	}
}
</script>

---

---

解决方案：

上面的方法尝试了，但没有生效，所以又尝试了利用css样式实现吸顶

<template>
	<view class="stickyTop selectSticky" style="top:80rpx;">
		<iDropdown v-on:c_filtrate="filtrate"></iDropdown>
	</view>
</template>
<script>
export default {
	data() {
		return {
		
		}
	},
}
</script>

<style>
.stickyTop{
	/* 兼容chorme */
	position: -webkit-sticky;
	position: sticky;
	top: var(--window-top);
	z-index: 99;
}
</style>

效果如图

---