title: Using react-sticky to make a sticky header
body: <p>I am trying to use the react-sticky package to make a sticky header, but my header keeps scrolling out of view. This is the package: <a href="https://www.npmjs.com/package/react-sticky" rel="nofollow noreferrer">https://www.npmjs.com/package/react-sticky</a>
  I am not sure if I am using the StickyContainer or Sticky compnents correctly. I am actually a bit confused about the "style" prop you're supposed to pass to the Sticky container. </p>
  
  <p>If anyone can help, will be much appreciated. Thanks!</p>
  
  <p>Here's the code for App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Header from './components/Header';
  import Footer from './components/Footer';
  import HomePage from './components/pages/HomePage';
  import OurWork from './components/pages/OurWork';
  import ContactUs from './components/pages/ContactUs';
  import { BreakpointProvider } from 'react-socks';
  import { StickyContainer, Sticky } from "react-sticky";
  import { setDefaultBreakpoints } from 'react-socks';
  
  setDefaultBreakpoints([
    { small: 0 },
    { medium: 700 }
  ]);
  
  class App extends Component {
    pageStyle = {
      display: 'flex',
      flexDirection: 'column'
    }
  
    render() {
      return (
        &lt;BreakpointProvider&gt;
          &lt;StickyContainer&gt;
            &lt;div className="App"&gt;
              &lt;Sticky&gt;
                {({style}) =&gt; &lt;Header style={style}/&gt;}
              &lt;/Sticky&gt;
              &lt;div className="page" style={this.pageStyle}&gt;
                  &lt;HomePage /&gt;
                &lt;OurWork /&gt;
                &lt;ContactUs /&gt;
              &lt;/div&gt;
            &lt;Footer /&gt;
          &lt;/div&gt;
          &lt;/StickyContainer&gt;
        &lt;/BreakpointProvider&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Here is the Header component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Logo from './Logo'
  import NavBar from './NavBar';
  import logo from '../images/transparent.png';
  
  class Header extends Component {
      headerStyle = {
          height: 100,
          margin: 20,
          display: 'flex',
          justifyContent: 'space-between',
          zIndex: 10
      };
  
      render() {
          return (
              &lt;div className="header" style={this.headerStyle}&gt;
                  &lt;Logo logo={logo}/&gt;
                  &lt;NavBar /&gt;
              &lt;/div&gt;
          );
      }
  
  };
  
  export default Header;
  </code></pre>