<Box width={'30%'} > <Box sx={{ position: 'sticky', top: '100px', transition: 'all .4s ease' }}> {/* My render elements */} </Box> </Box>
我试图解决这个问题,但它不工作,我不知道发生了什么?
wwtsj6pe1#
你必须将Box Package 在另一个元素中,并在那里设置sticky属性,如下所示:
Box
sticky
const StickyElement = ({ children }) => { return <div style={{ position: 'sticky', top: '10px' }}>{children}</div>; }; export default function App() { return ( <div style={{ minHeight: '300vh', position: 'sticku', top: '10px' }}> <StickyElement> <Box width={'30%'}> <Box sx={{ backgroundColor: 'primary.dark', position: 'sticky', top: '100px', transition: 'all .4s ease', }} > {/* My render elements */} <h1>Some content</h1> </Box> </Box> </StickyElement> </div> ); }
https://stackblitz.com/edit/react-ts-fbqkn6?file=App.tsx
1条答案
按热度按时间wwtsj6pe1#
你必须将
Box
Package 在另一个元素中,并在那里设置sticky
属性,如下所示:https://stackblitz.com/edit/react-ts-fbqkn6?file=App.tsx