反应粘性:如何正确提供距离从顶部选项

Question

这个例子说我应该用这种方式提供它：

<Sticky>
{({
style,
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => (
<header style={style}>
{/* ... */}
</header>
)}
</Sticky>
{/* ... */}

但是，如何正确定义distanceFromTop并将其提供给粘性组件并应用它呢？有人可以举个例子吗？

Answer 1

一种更好的方法是在具有粘性导航时处理此粘性容器。

<StickyContainer >
<Sticky topOffset={-navHeight}>
{({ style, isSticky }) =>
<div style={{...style, top: `${navHeight + style.top}px`}} />
}
</Sticky>
</StickyContainer>

Answer 2

我没有找到使distanceFromTop工作的方法，但找到了一种通过使用isSticky获得所需效果的方法。

<StickyContainer >
<Sticky topOffset={-20}>
{({ style, isSticky }) =>
<div style={{...style, marginTop: isSticky ? '20px' : '0px'}} />
}
</Sticky>
</StickyContainer>

这会将div 标签从顶部放置 20px。

Acmoune在这篇文章中给出了答案： 当粘性容器顶部与 0 不同时是否可以粘贴？