Скользящее содержимое прокручивается в фиксированный заголовок меню Semantic UI - PullRequest
Новая
       8

Скользящее содержимое прокручивается в фиксированный заголовок меню Semantic UI

0 голосов
/ 05 июня 2019

Итак, я настроил некоторый липкий рельс, используя пример для SUIR docs . Однако при прокрутке основного содержимого содержимое рельса прокручивается в мой фиксированный заголовок.

Нужно ли устанавливать больше правил для стиля <Rail>?

Codesandbox ссылка здесь

Чтобы просмотреть проблему, перейдите к 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>
    );
  }
}

1 Ответ

0 голосов
/ 06 июня 2019

Ну, довольно простое исправление, просто не было правильной опоры, которая решает эту проблему.

Значение offset для <Sticky> должно быть установлено на соответствующее значение.

В моем случае 

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