title: React - How do you get the top position of a styled component?
body: <p>Something that used to be simple is quite complicated when you don't know the <em>React</em> way. </p>
  
  <p>I'm trying to create a component to act like a sticky header or footer when it reaches the top of the page. </p>
  
  <p>At the moment I'm quite content in adding the below: </p>
  
  <pre><code>  componentDidMount() {
      window.addEventListener('scroll', this.onScroll, false);
    }
  
    componentWillUnmount() {
      window.removeEventListener('scroll', this.onScroll, false);
    }
  </code></pre>
  
  <p>However I've hit a wall to how I get the scroll top position of a styled component. So lets say I had a styled component called <code>Container</code> and that outputted a form I usually just add a data attribute and do something like the below: </p>
  
  <pre><code>const container = document.getElementbyTag("data-sticky-container")
  const position = container.offsetTop 
  </code></pre>
  
  <p>How would I go about doing this in React? </p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>Now using <code>ref</code>. I've fallen into a problem where current isn't defined:</p>
  
  <pre><code>  constructor(props) {
      super(props);
      this.optionBox = React.createRef();
    }
  
    componentDidMount() {
      window.addEventListener('scroll', this.onScroll, false);
    }
  
    componentWillUnmount() {
      window.removeEventListener('scroll', this.onScroll, false);
    }
  
    onScroll() {
      console.log(this.optionBox.current.offsetTop);
    }
  </code></pre>