我正在創建購物車的前端。我將容器分成了兩列(使用網格容器和網格項),在每列中，我都插入了一些組件。左側包含每個商品的組件，左側只包含一個顯示訂單摘要的組件。這張照片說明了我所說的:

我的問題是，當用戶滾動時，如何使左側(訂單摘要)粘在頁面頂部。我嘗試了z-index和服裝CSS樣式(position: fixed和position: stic ky)的一些東西，但它們打破了材質UI提供的網格結構。此外，考慮到視圖具有響應性，對于移動屏幕來說，訂單匯總組件最好保持在頁面的末尾，也就是現在的位置:

我可以實現將組件放在桌面的頂部，但是當我添加自定義樣式時，組件在移動視圖中卡在頂部，看起來很糟糕。有什么我可能沒有注意到的實際方法來實現這一點嗎？

這是這個項目的沙盒:https://codesandbox.io/s/charming-cherry-eh27f

我希望這種將頁面分成欄的方式對某些人有所幫助，因為我在網上找了一些類似的東西，今天早上自己也想到了這種方式。同時，我將感謝任何對我正在嘗試實現的這個特性的反饋和幫助。

更新 下面由MaCadiz提供的解決方案工作完全正常。我只是想說，如果你想為這個項目添加更多的功能，請隨意創建任何拉請求。以下是Github回購鏈接:https://Github . com/kleviss/shopping-cart-frontend-react-material

在你的沙箱中，我意識到你有一個嵌套的網格項目在另一個網格項目中，我不知道這是否是故意的，但我還是刪除了它。

<Grid item xs={12} sm={6} md={5} lg={5}>
  <Grid item xs elevation={3}> <==== THIS ONE
    <OrderSummaryItem />
  </Grid>
</Grid>

然后，我將OrderSummaryItem組件的位置設置為sticky，并進行了一些調整，我認為它工作得很好?？纯催@個我用你的圣代盒子做的叉子:https://codesandbox.io/s/amazing-darkness-q0o5h

嘗試位置:& quot固定& quotif位置:& quot粘性& quot不起作用。