How to reveal a React component on scroll

Question

I\'ve created a React component for a fixed nav that I would like to remain hidden, until I scroll past a certain point on the page, then slides into view. Medium has a header s

Answer 1

I created a react component for this same exact need as I could not find any other implementations that matched what I needed. Even react-headroom did not give you something that would just scroll in after reaching a certain point on the page.

The gist is here: https://gist.github.com/brthornbury/27531e4616b68131e512fc622a61baba

I don't see any reason to copy the component code here. The code is largely based off of the react-headroom code but does less and is therefore simpler.

The component is the first piece of code, you could simply copy/paste then import it. After importing your code with the navbar would look something like this:

class MyScrollInNavBar extends Component {
    render() {
      return (
        
          
        
      );
    }
}