vant-weapp/packages/sticky/index.ts

import { VantComponent } from '../common/component';

VantComponent({
  props: {
    zIndex: {
      type: Number,
      value: 99
    },
    offsetTop: {
      type: Number,
      value: 0
    },
    disabled: Boolean
  },

  data: {
    wrapStyle: '',
    containerStyle: ''
  },

  methods: {
    setStyle() {
      const { offsetTop, height, fixed, zIndex } = this.data;

      if (fixed) {
        this.setData({
          wrapStyle: `top: ${offsetTop}px;`,
          containerStyle: `height: ${height}px; z-index: ${zIndex};`
        });
      } else {
        this.setData({
          wrapStyle: '',
          containerStyle: ''
        });
      }
    },

    observerContentScroll() {
      const { offsetTop } = this.data;
      const intersectionObserver = this.createIntersectionObserver({
        thresholds: [0, 1]
      });
      this.intersectionObserver = intersectionObserver;
      intersectionObserver.relativeToViewport({ top: -offsetTop });
      intersectionObserver.observe(
        '.van-sticky',
        (res) => {
          if (this.data.disabled) {
            return;
          }
          // @ts-ignore
          const { top, height } = res.boundingClientRect;
          const fixed = top <= offsetTop;

          this.$emit('scroll', {
            scrollTop: top,
            isFixed: fixed
          });

          this.setData({ fixed, height });

          wx.nextTick(() => {
            this.setStyle();
          });
        }
      );
    }
  },

  mounted() {
    this.observerContentScroll();
  },

  destroyed() {
    this.intersectionObserver.disconnect();
  }
});