title: React implementing react-sticky
body: <p>I am trying to implement the following: <a href="https://www.npmjs.com/package/react-sticky" rel="nofollow">https://www.npmjs.com/package/react-sticky</a></p>
  
  <p>in my code as follow:</p>
  
  <pre><code>import React from 'react';
  
  import Video       from  './../video.jsx';
  import Overview    from  './overview.jsx';
  import Photography from  './photography.jsx';
  import Details     from  './details.jsx';
  import Cast        from  './cast.jsx';
  
  import porgectsCollection from './../../data/projectInfo.js';
  
  import { StickyContainer, Sticky } from 'react-sticky';
  
  class Nav extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        mobileMenu: false
      };
    }
    showMobileMenu () {
      this.setState({ mobileMenu: !this.state.mobileMenu });
    }
    render () {
      let links = this.props.project.links.map(function(el, i){
        return &lt;li key={i}&gt;{el}&lt;/li&gt;;
      });
      const open = this.state.mobileMenu ? ' open' : '';
  
      return (
          &lt;StickyContainer&gt;
          &lt;span onClick={this.showMobileMenu.bind(this)} className="mobile-trigger"&gt;X&lt;/span&gt;
            &lt;Sticky topOffset={100} stickyClassName="sticky-nav"&gt;
              &lt;nav className={"secondary-nav" + open}&gt;
                &lt;ul&gt;
                  {links}
                &lt;/ul&gt;
              &lt;/nav&gt;
            &lt;/Sticky&gt;
          &lt;/StickyContainer&gt;
      );
    }
  }
  
  class SingleProject extends React.Component {
    getProjectDataFromUrl() {
      return porgectsCollection.filter(el =&gt; el.title === this.props.params.id);
    }
    render () {
      let data = this.getProjectDataFromUrl(),
          project = data[0];
          console.log(project);
      return (
          &lt;section className="project-page"&gt;
            &lt;Video project={project} /&gt;
            &lt;Nav project={project} /&gt;
            &lt;Overview project={project} /&gt;
            &lt;Photography project={project} /&gt;
            &lt;Details project={project}  /&gt;
            &lt;Cast project={project} /&gt;
          &lt;/section&gt;
      );
    }
  }
  
  export default SingleProject;
  </code></pre>
  
  <p>I would hope that when "Sticky" reached 100px from the top it would get a custom class "sticky-nav" applied to it. However the nav keeps on scrolling without getting stuck at all. I can see the divs applied around my markup with the extra padding but no more then that.</p>
  
  <p>URL project: <a href="https://github.com/WebTerminator/aldemar" rel="nofollow">https://github.com/WebTerminator/aldemar</a>, 
  file in question is singleProject.jsx</p>