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

Question

我正在使用语义组件来创建顶部菜单 + 面包屑 header。出于某种原因，滚动条 "jumps" 尝试从最顶部位置滚动时

我还没有为粘性组件提供 context 属性。在 examples 中，他们总是提供封闭 div 的 React DOM 引用作为 Sticky 组件的上下文属性。关于 context 道具的用途，文档并不清楚。（它说 "Context which sticky element should stick to"）

我是否需要为粘性组件提供上下文属性以停止 "jump" 滚动？如果是这样，我如何决定将哪个封闭 div 引用作为上下文道具提供？

Answer 1

滚动时，position:fixed; 被添加到 <div class="ui inverted menu"> 的父级。这会将元素从 dom 结构中移出，从而移除它占据的 space 。于是，姐弟一跃而起，占据了空位space。

作为解决方法，您可以在位置设置为固定时手动将 margin-top 添加到同级。

Answer 2

我使用了 Rails 组件来包裹 Sticky 组件，并向同级应用了 padding/margin 偏移量。导轨使粘性行为像覆盖层而不是父级的一部分 div。只需要将自定义 css 添加到导轨即可覆盖默认行为。 Context ref 允许粘滞在该元素的上下文中。

对代码沙箱进行了一些更改Sticky Menu Example

Answer 3

我自己解决了。尝试按照上述解决方案添加导轨，但没有用。

我意识到我的问题是我使用的预渲染库。我没有删除预渲染库，而是向 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);
    ...
}

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

Creating a sticky bar in Semantic UI (React). Page jumps when scrolling

sticky

semantic-ui

semantic-ui-react