weilaiGo/components/sticky/index.js

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();
    }
});