semantic-ui-react Sticky广告(广告跟随滚动)

Question

我在定义一个粘性广告时遇到了问题，我对react是个菜鸟，所以我可能会遗漏一些东西。

我有一个有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 })