react sticky header

1// One way around it
2
3// First off get react-sticky (npm/yarn etc..)
4npm install react-sticky
5
6// Then you could do something like...
7import React from 'react';
8import { StickyContainer, Sticky } from 'react-sticky';
9// ...
10 
11class App extends React.Component {
12  render() {
13    return (
14      <StickyContainer>
15        {/* Other elements can be in between `StickyContainer` and `Sticky`,
16        but certain styles can break the positioning logic used. */}
17        <Sticky>
18          {({
19            style,
20 
21            // the following are also available but unused in this example
22            isSticky,
23            wasSticky,
24            distanceFromTop,
25            distanceFromBottom,
26            calculatedHeight
27          }) => (
28            <header style={style}>
29              {/* ... */}
30            </header>
31          )}
32        </Sticky>
33        {/* ... */}
34      </StickyContainer>
35    );
36  },
37};