sticky header on scroll css only react js 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
}) => (
)}
{/* ... */}
);
},
};