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