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

时间:2018-01-01 14:32:56

标签: semantic-ui sticky semantic-ui-react

我在语义中使用组件来创建顶级菜单+ breadcrumb标头。由于某种原因,滚动条"跳跃"当试图从最顶端的位置滚动

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

我还没有向粘性组件提供context道具。在examples中,他们始终提供封闭div的React DOM引用作为Sticky组件的上下文prop。文档不清楚context道具的用途。 (它说"粘性元素应该坚持的语境")

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

3 个答案:

答案 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);
    ...
}