semantic-ui - 在语义 UI (React) 中创建粘性栏。滚动时页面跳转

Question

我在语义中使用组件来创建顶部菜单 + 面包屑标题。出于某种原因，尝试从最顶部位置滚动时，滚动条会“跳跃”

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

我还没有提供 context支持粘性组件。在 examples他们一直提供封闭 div 的 React DOM 引用。作为 Sticky 的上下文 Prop 成分。文档不清楚 context 的目的支柱。 (它说“粘性元素应该坚持的上下文”)

我是否需要为粘性组件提供上下文 Prop 以停止“跳转”滚动？如果是这样，我如何决定提供哪个封闭的 div ref 作为上下文 Prop ？

Answer 1

滚动时，position:fixed;已添加到 家长 的 <div class="ui inverted menu"> .这会将元素从 dom 结构中移出，从而移除它占据的空间。因此，兄弟会跳起来占据空闲空间。

您可以手动添加 margin-top作为一种解决方法，当位置设置为固定时，到 sibling 。