如何使Material UI网格元素变为粘性? [英] How to make a Material UI grid element sticky?

问题描述

我正在创建购物车的前端.我已将容器分为两列(使用Grid容器和Grid项)，并且在每一列的内部都插入了一些组件.左侧包含每个项目的组件，左侧仅包含一个显示订单摘要"的组件.这张图片说明了我在说什么:

I am creating the front-end of for shopping cart. I have divided the container into two columns (using Grid container and Grid item) and inside each column, I have inserted some components. The left side contains components for each item and the left side contains only one component that shows the Order Summary. This picture illustrates what I am saying:

我的问题是，当用户滚动时，如何使此左侧(订单摘要")粘在页面顶部.我用 z-index 和服装CSS样式( position:fixed 和 position:sticky )尝试了几件事，但是它们破坏了网格材质UI提供的结构.此外，考虑到视图是响应性的，对于移动屏幕而言，订单摘要"组件应保留在页面的末尾，即现在所在的位置.

My question is how to make this left side (Order Summary) sticky at the top of the page when a user scrolls. I tried a couple of things with z-index and costume CSS-styling (position: fixed and position: sticky) but they break the Grid Structure that the Material UI offers. Also considering that the view is responsive it would be great that for mobile screens the Order Summary component stays at the end of the page where it is now:

我可以实现将组件粘贴在桌面上的顶部，但是当我添加自定义样式时，该组件粘贴在移动视图的顶部，看起来很糟糕.有什么实际的方法可以实现我可能没有注意到的吗?

I could achieve to stick the component on top on desktop but then when I added custom styling the component stuck in the top in the mobile view and looks terrible. Is there any practical way to achieve this that I may have not noticed?

这是项目的沙箱: https://codesandbox.io/s/charming-cherry-eh27f

我希望这种将页面分为几列的方式对某人有帮助，因为我在网上找到类似的东西时有些挣扎，并且今天早上我自己也这样想.同时，对于我要实现的此功能的任何反馈和帮助，我将不胜感激.

I hope that this way of dividing the page into columns would be helpful for somebody because I struggled a bit to find something similar online and thought of this way myself this morning. At the same time, I would appreciate any feedback and help for this feature I am trying to implement.

下面由MaCadiz提供的解决方案可以正常工作.我只是想说，如果您想向该项目添加更多功能，可以随意创建任何拉取请求.这是Github仓库链接: https://github.com/kleviss/shopping-cart-frontend-react-material

The solution provided by MaCadiz below works totally fine. I just wanted to say that feel free to create any pull requests if you want to add more features to this project. Here is the Github repo link: https://github.com/kleviss/shopping-cart-frontend-react-material

推荐答案

在您的沙箱中，我意识到您在另一个网格项目中有一个嵌套的网格项目，我不知道这是否是有意的，但无论如何我还是将其删除了.

In your sandbox I realized that you have a nested grid item inside another grid item, I don't know if this was intentional, but I removed it anyway.

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

然后，我将OrderSummaryItem组件的位置设置为粘滞并进行一些调整，我认为它工作正常.检查我是从您的沙箱中制成的叉子: https://codesandbox.io/s/amazing-darkness-q0o5h

Then I set the position of the OrderSummaryItem component to sticky and some tweaks and I think it's working fine. Check this fork I made from your sandbox: https://codesandbox.io/s/amazing-darkness-q0o5h

这篇关于如何使Material UI网格元素变为粘性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！