(已解决)vant-weapp源码之vant-sticky的疑问

Question

业务背景

仿vant-weapp实现一个兼容各小程序及h5的吸顶效果。原本以为这个只是简单的css position:sticky属性就能完成的

问题

之前也通过sticky的css属性实现过吸顶,未发现有啥异常..可是有赞这个ui为啥要搞得这么复杂,通过元素相交状态来实现呢?

vant-weapp相关链接

文档： https://youzan.github.io/vant...
源码链接: https://github.com/youzan/van...
源码部分

observeContainer() {
      if (typeof this.data.container !== 'function') {
        return;
      }

      const { height } = this.data;

      this.getContainerRect().then(
        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
          this.containerHeight = rect.height;

          this.disconnectObserver('containerObserver');
          const containerObserver = this.createIntersectionObserver({
            thresholds: [0, 1]
          });
          this.containerObserver = containerObserver;
          containerObserver.relativeToViewport({
            top: this.containerHeight - height
          });
          containerObserver.observe(ROOT_ELEMENT, res => {
            this.setFixed(res.boundingClientRect.top);
          });
        }
      );
    },

问题解决

• sticky吸顶是ok的,但是只能相对于屏幕顶端进行吸顶
• 通过相交状态实现吸顶,除了屏幕顶端,可以相对任意元素进行吸顶

Answer 1

问题解决

• sticky吸顶是ok的,但是只能相对于屏幕顶端进行吸顶
• 通过相交状态实现吸顶,除了屏幕顶端,可以相对任意元素进行吸顶

Answer 2

可能是早期版本兼容，可能是兼容各种机型（weex上不同手机 sticky 效果不一样），没必要纠结。