css sticky header with animation 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 (
      <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>
    );
  },
};