Make a layer stick after a fixed scroll distance in Framer X

StickyHeader.tsx

import { Override, motionValue, useTransform } from "framer"

// Create a MotionValue to track scroll content offset
const contentOffsetY = motionValue(0)

// Apply this override to your scroll component
export function TrackScroll(): Override {
    return {
        contentOffsetY: contentOffsetY,
    }
}

// Apply this override to your header component
export function StickyHeader(): Override {
    const travel = 400
    const y = useTransform(
        contentOffsetY,
        [0, -travel, -travel * 2],
        [0, 0, travel],
        {
            clamp: false,
        }
    )
    return {
        y: y,
    }
}