部分业务场景会监控元素曝光情况，用于进行一些页面状态变化和埋点上报分析。显然，通过onPageScroll事件的回调来查询元素的信息显然是“天理难容”的，毕竟频繁去调用selectQury是一件特别耗性能的事情。
建议使用节点布局相交状态监听intersectionObserver来推断元素是否可见、有多大比例可见等。
官方提供了代码段地址：微信开发者工具 | 代码片段
首先看wxml
<view class="fixed-wrap" id="fixed-wrap">
<view
id="fixed-content"
class="fixed-box {{ isFixed ? 'stick' : '' }}"
data-text="自定义添加的文字"
data-id="{{ identifier }}"
>
<text>{{ isFixed ? '吸顶啦' : '元素滑动至tab栏时吸顶' }}</text>
</view>
</view>
再来看js部分
Page({
data: {
// 给固定定位元素添加的自定义标识
identifier: new Date().getTime(),
isFixed: false
},
onLoad() {
// 页面渲染要很久并且高度不固定的情况下，用这个比较稳定
this.onElementLinstener();
},
/**
* 同样以吸顶功能为需求，做一个节点侦听器版本的吸顶功能，借此过程可以根据调试结果更好的熟悉api的使用
* 即使看过文档，查过一些大佬的使用案例和说明也一样是有点懵，索性新建了个代码片段去尝试，不停的调试查看打印数据，终于完成了需求
* 想给用到这个API的各位说一下，因为是在项目结束后才有时间去总结这些，所以使用时候踩的坑和迷惑的地方可能没办法全部描述出来，所以即使看过它，也只是看了个和官方文档差不多的一个例子而已，还是需要自己写demo去查看不同状态下的打印数据。
* 多去尝试，敢于试错
*/
// 元素观察器
onElementLinstener () {
wx.setNavigationBarTitle({ title: '元素观察器' })
// 获取系统信息 statusBarHeight为状态栏高度
const { statusBarHeight } = wx.getSystemInfoSync();
// 创建节点侦查器
const createIntersectionObserver = wx.createIntersectionObserver(this);
// 可以链式调用，这里是为了写备注方便点
/**
* 调用 relativeToViewport() 去指定页面显示区域作为参照
* 假定 statusBarHeight 的值为 20 ，那么下边的代码就是选择了距离顶部 64像素(模拟导航栏高度) 的地方，就像页面的一条横截线一样
* observe() 的第一个参数指定的元素达到所选的参照区域，则侦听器触发回调
*/
createIntersectionObserver.relativeToViewport({ top: -(statusBarHeight + 44) });
// 指定要侦测的元素为 '#fixed-wrap' , ← 为包裹固定元素的容器而不是固定元素
createIntersectionObserver.observe('#fixed-wrap', res => {
const { boundingClientRect, intersectionRect } = res;
// boundingClientRect - 目标边界相对于页面的情况
// clientTop 为与目标相去的高度，当它为负值的时候则说明元素已经过了我们所设置监听的那个高度
const { top: clientTop } = boundingClientRect;
// intersectionRect - 与目标相交的区域 上下左右.. 单位px 因为这里指定的是页面的一条横截线，所以无所谓上下左右
// top 为观察元素相对于页面的高度
const { top } = intersectionRect;
if (clientTop <= 0 && top === 0) {
this.setData({ isFixed: true });
return;
}
this.setData({ isFixed: false });
});
},
})
