我在语义中使用组件来创建顶级菜单+ breadcrumb标头。由于某种原因,滚动条"跳跃"当试图从最顶端的位置滚动
沙箱https://codesandbox.io/s/y7k3zn5qn1
我还没有向粘性组件提供context
道具。在examples中,他们始终提供封闭div
的React DOM引用作为Sticky
组件的上下文prop。文档不清楚context
道具的用途。 (它说"粘性元素应该坚持的语境")
我是否需要为粘性组件提供上下文道具以阻止"跳转"滚动?如果是这样,我如何决定哪个封闭div ref作为上下文prop?
答案 0 :(得分:3)
滚动时,position:fixed;
会添加到<div class="ui inverted menu">
的父。这将元素从dom结构中移出,从而消除了它占据的空间。因此,兄弟姐妹跳起来占据了自由空间。
当位置设置为固定时,您可以手动将margin-top
添加到兄弟姐妹,作为变通方法。
答案 1 :(得分:1)
我用Rails组件包装了Sticky组件,并向同级对象添加了padding / margin偏移量。 轨道使粘性行为像叠加层一样,而不是父div的一部分。只需将自定义css添加到rail即可覆盖默认行为。 Context ref允许将sticky粘在该元素的整个上下文中。
对代码沙箱Sticky Menu Example
进行了一些更改答案 2 :(得分:0)
我有点自己解决了。尝试按照上述解决方案添加导轨,但是没有用。
我意识到对我来说问题是我正在使用的预渲染库。我没有摆脱预渲染库,而是向 Sticky 添加了一个 active 属性,默认情况下该属性为 false (存储在状态中) 。然后,在3秒的延迟后,我将其打开(将状态中的 active 属性设置为 active )。我之所以选择3秒钟,是因为我认为这是我渲染每个页面所花费的时间(我没有确切了解它如何执行此操作的详细信息)。
赞:
componentDidMount() {
...
//Enable sticky functionality after delay
setTimeout(function() { //Start the timer
this.setState({
controls: {
...this.state.controls,
isStickyActive: true,
}
}) //After 3 seconds, set isStickyActive to true
}.bind(this), 3000);
...
}