语义-ui-反应粘性广告(广告跟随滚动)

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 })