Question

因此，我使用SUIR docs的示例来设置一些粘性轨道内容。但是，滚动主要内容时，铁路内容会滚动到我的固定标题中。

我需要为<Rail>的样式道具设置更多规则吗？

要查看问题，请从菜单栏中导航至Docs。 <Rail>组件位于Overview.js文件的底部

export default class Overview extends Component {
  contextRef = createRef();

  render() {
    return (
      <div>
        <FixedMenuLayout />
        <Grid centered columns={3} style={{ marginTop: "7em" }}>
          <Grid.Column>
            <Ref innerRef={this.contextRef}>
              <Segment>
                <Docs />

                <Rail position="left">
                  <Sticky context={this.contextRef}>
                    <Header as="h3">Getting Started</Header>
                    <List style={{ padding: "5px" }}>
                      <List.Item>Overview</List.Item>
                      <List.Item>Examples</List.Item>
                      <List.Item>Tutorial</List.Item>
                    </List>
                    <Header as="h3">How To</Header>
                    <List style={{ padding: "5px" }}>
                      <List.Item>Building</List.Item>
                      <List.Item>Standalone</List.Item>
                      <List.Item>Deployment</List.Item>
                    </List>
                    <Header as="h3">Development</Header>
                    <List style={{ padding: "5px" }}>
                      <List.Item>Road Map</List.Item>
                      <List.Item>Upcoming Features</List.Item>
                    </List>
                  </Sticky>
                </Rail>

                <Rail position="right">
                  <Sticky context={this.contextRef}>
                    <Header as="h3">Overview</Header>
                    <List style={{ padding: "5px" }}>
                      <List.Item>Overview</List.Item>
                      <List.Item>Examples</List.Item>
                      <List.Item>Tutorial</List.Item>
                    </List>
                  </Sticky>
                </Rail>
              </Segment>
            </Ref>
          </Grid.Column>
        </Grid>
      </div>
    );
  }
}

Answer 1

一个相当简单的修复程序只是没有看到正确的道具来处理这个确切的问题。

<Sticky>的{{3}}属性需要设置为适当的值。

就我而言

<Sticky offset={90} context={this.contextRef}>

粘性内容向上滚动到固定菜单标题语义UI

1 个答案: