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

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>