itsdouges / react-sticky-header

🍯 A sticky header for React.js

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

react-sticky-header's Issues

Copy`.flow` files to dist directory

Add to boilerplate too

Get coverage working again

Maybe nyc isn't getting the istanbul plugin from babel or something.

Support previous versions of react

Add unit tests

Whoops!

the header is getting sticky at the page load itself

Create a basic "color only" sticky header component

This will allow consumers who don't care about background images get a leaner component, saving kb.

Move react to peer dependency

If height of element is changed in moment when header gets "is-sticky" class, animation has glitches

If height of element is changed in moment when header gets "is-sticky" class, animation has glitches. For example I have larger logo and after "is-sticky" state I want to replace it with smaller one. Around that scroll spot, "is-sticky" class gets gone and gets back several times in few milliseconds because of changing of sticked header height.

Remove classnames dependency

Uncaught TypeError: Cannot read property 'offsetHeight' of null at index.js:48

Sticky header works but I'm getting this error on each reload:

Uncaught TypeError: Cannot read property 'offsetHeight' of null
at index.js:48

it's this part of the code:

requestAnimationFrame(function () {
        var stickyHeaderHeight = _this._fixed.offsetHeight;

Implementation of your code:

import 'react-sticky-header/styles.css';
import StickyHeader from 'react-sticky-header';

class Header extends React.Component {
    state = {
        sticked: false,
    };


    changeSticked = isSticky => {
        this.setState({sticked: isSticky});
    }

    render() {
        const logo = require("../../images/logo_v2.svg");
        const logoSmall = require("../../images/logo_v1.svg");
        return (
            <StickyHeader
                // This is the sticky part of the header.
                onSticky={(sticky) => {
                    this.changeSticked(sticky);
                }}
                header={
                    <div className="header-root">
                        <div className="mini-header__logo"><img className="main-logo" src={this.state.sticked ? logoSmall : logo} alt=""/>
                        </div>
                        <div className="mini-header__entry-switch">
                            <ul className="header_menu t-primary-14 t-weight-b">
                                <Link className="header-link" to="/about">About</Link>
                                <Link className="header-link" to="/faq">FAQs</Link>
                                <Link className="header-link" to="/contact">Contact us</Link>
                            </ul>
                            <Link className="mui-button" to="/registration">Sign Up</Link>
                        </div>
                    </div>
                }
            >
                <section>
                    <p style={{height: '200px', backgroundColor: '#ff00ff'}}>
                        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>
        )
    }

};

export default Header;

Sitcky header doesn't update sticky strip if its children update (thus changing its height)