React sticky header
// One way around it
// First off get react-sticky (npm/yarn etc..)
npm install react-sticky
// Then you could do something like...
import React from 'react';
import { StickyContainer, Sticky } from 'react-sticky';
// ...
class App extends React.Component {
render() {
return (
<StickyContainer>
{/* Other elements can be in between `StickyContainer` and `Sticky`,
but certain styles can break the positioning logic used. */}
<Sticky>
{({
style,
// the following are also available but unused in this example
isSticky,
wasSticky,
distanceFromTop,
distanceFromBottom,
calculatedHeight
}) => (
<header style={style}>
{/* ... */}
</header>
)}
</Sticky>
{/* ... */}
</StickyContainer>
);
},
};