Question

example说我应该以这种方式提供它：

<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。

气氛在这篇文章中给出了答案： Is it possible to stick when the StickyContainer top is something different than 0?

React-sticky：如何正确提供distanceFromTop选项

2 个答案: