在语义UI(React)中创建粘滞条.滚动时页面跳转

Pra*_*anD 8 sticky semantic-ui semantic-ui-react

我正在使用语义中的组件来创建顶级菜单+ breadcrumb标头.出于某种原因,当尝试从最顶部位置滚动时,滚动条会"跳跃"

沙箱https://codesandbox.io/s/y7k3zn5qn1

我没有提供context粘性组件的道具.在示例中,它们始终提供封闭的React DOM引用div作为Sticky组件的上下文prop .关于context道具的目的,文件不清楚.(它说"粘性元素应该坚持的上下文")

我是否需要为粘性组件提供上下文支持以停止"跳转"滚动?如果是这样,我如何决定哪个封闭div ref作为上下文道具?

小智 3

我使用 Rails 组件来包装 Sticky 组件,并向同级组件应用填充/边距偏移。轨道使粘性行为就像覆盖层一样,而不是父 div 的一部分。只需要向 Rail 添加自定义 css 即可覆盖默认行为。上下文引用允许粘性条粘在该元素的上下文中。

对代码沙箱粘性菜单示例进行了一些更改