reactjs - Semantic-UI-react 固定侧边栏

Question

使用 Google 进行搜索，在语义 ui 的文档和问题页面中进行搜索，并在 stackoverflow 中进行搜索。找不到答案。

在 Semantic-ui-react 中，如何制作内容固定在屏幕上的侧边栏？我目前拥有的是:

<Sidebar.Pushable as={Segment}>
    <Sidebar
        id="sidebar"
        as={Menu}
        animation="overlay"
        direction="right"
        visible={this.state.visible}
        vertical
        inverted
    >
        {this.getMenuItems()}
    </Sidebar>
    <Sidebar.Pusher>
        <Route path="/" component={Filler} />
    </Sidebar.Pusher>
</Sidebar.Pushable>

semantic-ui-react文档中似乎没有任何单词，以及使Sidebar.Pushable、Sidebar或任何菜单项位置:固定；似乎也不起作用。

Answer 1

借助此answer我能够实现粘性侧边栏.

基本上，它指出为了有一个固定的侧边栏粘在我们的无限滚动页面上，我们必须删除变换属性在父容器上。原因是因为变换将定位上下文从视口(viewport)更改为旋转的元素。因此，“固定”子元素的行为就好像它具有“绝对”定位。

我将其添加到 sidebar.overrides 文件中

/* Page Context */
.pushable:not(body) {
  transform: none;
}

.pushable:not(body) > .ui.sidebar,
.pushable:not(body) > .fixed,
.pushable:not(body) > .pusher:after {
  position: fixed;
}

此解决方案适用于基本语义 UI 库。由于semantic-ui-react需要semantic-ui，这最终也适用于semantic-ui-react侧边栏。