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-header

Usage

// 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 start

Testing

npm test