我正在使用 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'但就像我說的那樣，它并沒有像我想象的那樣作業。也許我在這里遺漏了一些東西？
任何幫助將不勝感激，謝謝。
uj5u.com熱心網友回復：
使用位置粘性屬性還需要您添加位置。嘗試添加 top: 0; 和寬度：100% 和高度：50 像素。您可以根據需要設定寬度和高度。
粘性標簽：{位置：'粘性'，頂部：“0”，寬度：'100％'，高度：'50px'}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/427825.html
標籤：javascript html css
上一篇：在MovieList.js的第7行將物件從FetchMovie傳遞到MovieList組件時出現意外令牌，預期為“}”錯誤