Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// no operation
const noop = () => {};
// 1️⃣ This is where the event fires
function StickyBoundary({
as = "section",
onChange = noop,
onStuck = noop,
onUnstuck = noop,
children,
...rest
}) {
const Component = as;
// 2️⃣ Create TOP & BOTTOM sentinel refs
const topSentinelRef = useRef(null);
const bottomSentinelRef = useRef(null);
// 3️⃣ Compute sentinel offsets
const { bottomSentinelHeight, topSentinelMarginTop } = useSentinelOffsets(
topSentinelRef
);
// 4️⃣ Observe TOP sentinels and fire un/stuck/change events
useObserveTopSentinels(topSentinelRef, {
events: {
onChange,
onStuck,
onUnstuck
}
});
// 5️⃣ Observe BOTTOM sentinels and fire un/stuck/change events
useObserveBottomSentinels(bottomSentinelRef, {
events: {
onChange,
onStuck,
onUnstuck
}
});
// 6️⃣ Save the sentinels to associate with the target later on
const value = { topSentinelRef, bottomSentinelRef };
// 7️⃣ `StickyBoudnary` simply wraps each event section with TOP & BOTTOM sentinels
return (
<StickySectionContext.Provider value={value}>
<Component className={styles.sticky__section} {...rest}>
<div
ref={topSentinelRef}
style={{ marginTop: `-${sentinelMarginTop}` }}
className={styles.sticky__sentinel_top}
>
sentinel top
</div>
{children}
<div
ref={bottomSentinelRef}
style={{ height: `${targetHeight}`}}
className={styles.sticky__sentinel_bottom}
>
sentinel bottom
</div>
</Component>
</StickySectionContext.Provider>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.