我如何 position 我的元素是粘性的（当我滚动通过它们时留在屏幕上）

Question

我正在使用 NextJS 编写一个基本的电子商务网站，但遇到了问题
我想在我的页面中间有一个粘性标签，但出于某种原因position: 'sticky'不起作用
这是我的代码

[other stuff here]

<div className={classes.stickyTab}>
   <Grid style={{ backgroundColor: '#FFFFFF' }}>
      <div className={classes.outerTab}>
        <div className={classes.innerTab}>
            <div>Tab number 1</div>
        </div>
      </div>
   </Grid>

   <Grid style={{ backgroundColor: '#FFFFFF' }}>
      <div className={classes.outerTab2}>
        <div className={classes.innerTab2}>
           <div>Tab number 2</div>
        </div>
      </div>
    </Grid>
</div>

[other stuff here]

这是 styles.js

stickyTab: {
    position: 'sticky',
  },
outerTab: {
    display: 'flex',
    paddingTop: 16,
    paddingRight: 16,
    paddingBottom: 16,
    paddingLeft: 16,
  },
innerTab: {
    fontSize: '20px',
  },
outerTab2: {
    position: 'relative',
    marginTop: 10,
    marginBottom: 10,
  },
innerTab2: {
    position: 'relative',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 10,
  },

这是它在视觉上的样子

基本上我想要的只是让我的 2 个白色条变粘，这样当我滚动经过它们时它们会留在屏幕上。 我所做的只是将它们都包裹在一个 div 中，然后给它position: 'sticky'但就像我说的那样，它并没有像我想象的那样工作。 也许我在这里遗漏了什么？
任何帮助将不胜感激，谢谢。

Answer 1

使用 position 粘性属性还需要您添加 position。 尝试添加 top: 0; 宽度：100% 高度：50px。 您可以根据需要设置宽度和高度。

stickyTab: { position: 'sticky', top:"0", width:'100%', height: '50px' }