semantic-ui-react 粘性广告（广告跟随滚动）

Question

我在定义粘性广告时遇到了问题，我对反应非常陌生，所以我可能会遗漏一些东西。

我有一个包含 3 列的网格 - 它们的宽度分别为 3、10、3。 我想让最左边的列成为粘性列（在用户滚动时跟随用户）。

当我按照官方文档 (https://react.semantic-ui.com/modules/sticky) 上的示例进行操作时，我的列会收到相同的宽度 (16/3)，从而导致中间列和左右列之间的间距令人讨厌，并且中间列中的内容看起来被挤压.

我该如何解决这个问题？

我想做这样的事情：

<Grid>
  <div ref={this.handleContextRef}>
   <Rail position='left'>
    <Grid.Column width={3}>
        <Sticky context={contextRef}>
             <Advertisement unit='skyscraper' test='Skyscraper add' centered />
        </Sticky>
    </Grid.Column>
  </Rail>

    <Grid.Column width={10}>
        <MainComponent />
    </Grid.Column>

   <Rail position='right'>
    <Grid.Column width={3}>
        <Advertisement unit='skyscraper' test='Skyscraper add' centered />
    </Grid.Column>
   </Rail>
  </div>
</Grid>

Answer 1

将<Rail> 元素移动到<Grid> 元素中，并将internal 属性与rail 元素一起使用。尚未测试代码，但以下应该可以工作。

<Grid>
  <div ref={this.handleContextRef}>
   <Grid.Column width={3}>
      <Rail internal position='left'>
        <Sticky context={contextRef}>
           <Advertisement unit='skyscraper' test='Skyscraper add' centered />
         </Sticky>

      </Rail>
    </Grid.Column>

    <Grid.Column width={10}>
        <MainComponent />
    </Grid.Column>

    <Grid.Column width={3}>
      <Rail internal position='right'>
        <Advertisement unit='skyscraper' test='Skyscraper add' centered />
      </Rail>
    </Grid.Column>
  </div>
</Grid>

另一种选择

<Grid>
  <div ref={this.handleContextRef}>
      <Rail position='left'>
        <Advertisement unit='skyscraper' test='Skyscraper add' centered />
      </Rail>

    <Grid.Column width={10}>
        <MainComponent />
    </Grid.Column>

      <Rail position='right'>
        <Advertisement unit='skyscraper' test='Skyscraper add' centered />
      </Rail>
  </div>
</Grid>

还要确保你的班级中有handleContextRef = contextRef => this.setState({ contextRef })