Open mrdulin opened 9 months ago
import './style.css'; import Sticky from 'react-sticky-el'; export const App = () => { const panels = [{ id: 1 }, { id: 2 }, { id: 3 }]; return ( <div className="wrapper"> <div style={{ display: 'flex', marginTop: 40 }}> {panels.map((p) => ( <div key={p.id} className="panel"> <Sticky scrollElement=".wrapper"> <div className="panel-header">header {p.id}</div> </Sticky> <div className="panel-content">content {p.id}</div> </div> ))} </div> </div> ); };
style.scss:
style.scss
.wrapper { position: relative; height: 300px; width: 600px; overflow: auto; border: 1px solid #ddd; } .panel-header { background-color: red; } .panel-content { background-color: yellow; height: 600px; } .panel { width: 200px; margin: 0 10px; flex-shrink: 0; }
The sticky header does not follow the horizontal scrolling.
stackblitz
style.scss
:The sticky header does not follow the horizontal scrolling.
stackblitz