Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 1️⃣
function useSentinelOffsets(topSentinelRef) {
const { stickyRefs } = useStickyState();
const [bottomSentinelHeight, setBottomSentinelHeight] = useState("");
const [topSentinelMarginTop, setTopSentinelMarginTop] = useState("");
// 2️⃣
useEffect(() => {
// 3️⃣
const stickyNode = stickyRefs.get(topSentinelRef.current);
// 4️⃣
const topStyle = window.getComputedStyle(stickyNode);
const getProp = name => topStyle.getPropertyValue(name);
const paddingtop = getProp("padding-top");
const paddingBottom = getProp("padding-bottom");
const height = getProp("height");
const marginTop = getProp("margin-top");
// 5️⃣
const bottomSentinelHeight = `calc(${marginTop} +
${paddingtop} +
${height} +
${paddingBottom})`;
setBottomSentinelHeight(bottomSentinelHeight);
setTopSentinelMarginTop(marginTop);
}, [stickyRefs, topSentinelRef]);
// 6️⃣
return { bottomSentinelHeight, topSentinelMarginTop };
}
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.