react-sticky-header
Lightweight sticky header made for React that works with both colours and images. You can see an example implementation over at Guild Wars 2 Armory.
Installation
npm install react-sticky-headerUsage
// Import the base CSS, if you're using webpack just import them straight. // Else import them into your base CSS. import 'react-sticky-header/styles.css'; import StickyHeader from 'react-sticky-header'; const MyHeader = () => ( <StickyHeader // This is the sticky part of the header. header={ <div className="Header_root"> <h1 className="Header_title">ReactStickyHeader</h1> <ul className="Header_links"> <li className="Header_link">When</li> <li className="Header_link">Why</li> <li className="Header_link">About</li> </ul> </div> } > <section> <p> This section will be what the sticky header scrolls over before entering into sticky state. See the gif above or run the test story book to see examples. </p> </section> </StickyHeader> );| prop | type | required | description |
|---|---|---|---|
| header | Children | yes | A react element that will be the sticky part of the header. |
| children | Children | no | Elements that you want to appear under the sticky header. |
| headerOnly | boolean | no | Use this to force the header into "sticky" mode. It will automatically hide the children and calculate the height spacer for header. |
| onSticky | (boolean) => void | no | Callback fired when the header enters/leaves sticky state. See Sticky State section. |
| backgroundImage | string | no | Self explanatory. |
| backgroundColor | string | no | Self explanatory. |
| className | string | no | Self explanatory. |
| stickyOffset | number | no | The number to offset the sticky header. |
Sticky State
When the component enters sticky state, it will add a class name is-sticky to the root element of the header.
React Story Book
To run the component in various states, run the following command then go to http://localhost:6006/.
npm startTesting
npm test
