语义UI反应固定侧边栏

Question

已在语义ui的文档和问题页面中进行Google搜索，并在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>

语义ui反应文档中似乎没有任何单词，并将Sidebar.Pushable，Sidebar或任何Menu Items位置设置为：fixed; 似乎也不起作用。

Answer 1

在这个答案的帮助下，我能够实现粘性侧边栏。

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

我将此添加到 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;
}

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

Answer 2

您需要使用一些 CSS/SCSS 手动执行此操作。基本上，您需要将高度设置为固定值。

@media only screen and (max-width: 768px) {
  .ui.wide.left.sidebar, .ui.wide.right.sidebar {
    height: 100vh !important;
    position: absolute;
  }

  .pusher {
    margin-left: 20px;
  }
}

.pushable {
  min-height: 100vh;
}

.ui.wide.left.sidebar, .ui.wide.right.sidebar {
  height: 100vh;
  position: fixed !important;
  bottom: 0px !important;
  top: 0px !important;
}