how to create a fixed header on scroll react code example

Example: 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 (
      
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}
        
          {({
            style,
 
            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop,
            distanceFromBottom,
            calculatedHeight
          }) => (
            

              {/* ... */}
            
          )}
        
        {/* ... */}
      
    );
  },
};