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

【问题标题】：React-sticky: how to correctly provide distanceFromTop optionReact-sticky：如何正确提供 distanceFromTop 选项
【发布时间】：2018-10-03 09:40:43
【问题描述】：

example 说我应该这样提供：

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

但是我怎样才能正确定义distanceFromTop 并将其提供给粘性组件并应用它呢？有人可以举个例子吗？

【问题讨论】：

标签： javascript reactjs react-sticky

【解决方案1】：

一个更好的方法是当你有粘性导航时处理这个粘性容器。

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

【讨论】：

【解决方案2】：

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

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

这会将 div 标签放置在距顶部 20px 处。

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

【讨论】：