uniapp 实现sticky组件

在uniapp中使用uview UI的组件Sticky实现吸顶功能时，可能会遇到在H5下报错’bottom’ of null的问题。根据引用和引用的描述，这个问题通常是由于吸顶组件u-sticky和底部导航栏tabbar切换页面时产生冲突引起的。

针对这个问题，你可以尝试以下解决方法：
1. 检查底部导航栏tabbar是否与吸顶组件u-sticky产生了冲突。如果是，请尝试调整它们的布局或使用其他方式来实现吸顶效果。
2. 根据引用中的代码示例，你可以尝试使用纯CSS实现吸顶效果。通过设置元素的position属性为sticky，并指定top属性的值，可以将元素固定在指定位置。

下面是一个示例代码，演示了如何在uniapp中使用CSS实现sticky组件的效果：

<template>
  <view class="stickyTop selectSticky" style="top:80rpx;">
    <iDropdown v-on:c_filtrate="filtrate"></iDropdown>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    filtrate() {
      // 处理筛选事件
    }
  }
}
</script>

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

通过在需要吸顶的元素上添加类名，然后在样式中设置position为sticky，并指定top属性的值，即可实现吸顶效果。记得根据实际情况调整top的值，以使吸顶的位置符合你的需求。

希望以上信息对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [uniapp中使用uview UI的组件Sticky 吸顶 在H5下报错‘bottom‘ of null。纯css实现吸顶功能。](https://blog.csdn.net/abcdebb/article/details/124144037)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]