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

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

1 个答案: