在uniapp中监听元素距离顶部的距离，主要的思路是先获取元素的节点信息，然后使用onPageScroll事件监听页面滚动。当页面滚动到一定距离，达到元素接近顶部的位置时，可以通过添加class来固定该元素在顶部。具体步骤如下：

1. 获取节点信息：可以使用uni.createSelectorQuery()来创建一个查询请求，通过它可以获取元素的位置信息，包括元素距离顶部的距离。

2. 监听页面滚动：在onPageScroll事件中监听页面的滚动，onPageScroll是页面生命周期函数的一部分，可以获取到滚动的距离。

3. 判断并固定元素：当页面滚动距离超过元素距离页面顶部的距离时，通过改变元素的定位（比如添加一个固定定位的class）来固定元素在页面顶部。

以下是一个简化的代码示例：

// 在onReady或者onMounted生命周期中获取元素信息
onReady() {
  const query = uni.createSelectorQuery();
  query.select('#yourElementId').boundingClientRect();
  query.exec((res) => {
    // res[0]是元素的位置信息，包括top值
    this.elementTop = res[0].top;
  });
}

// onPageScroll生命周期函数中监听滚动
onPageScroll(e) {
  if (e.scrollTop >= this.elementTop) {
    // 当页面滚动超过元素距离顶部的距离时，执行固定元素的操作
    // 例如，添加一个固定定位的class
  } else {
    // 移除固定定位的class
  }
}

在这个示例中，#yourElementId是你想要监听并在滚动到顶部时固定位置的元素的ID。this.elementTop是该元素距离顶部的初始距离。当页面滚动时，onPageScroll事件会被触发，通过比较滚动距离e.scrollTop和元素的top值，来决定是否需要固定元素的位置。