title: React offsetTop of div changing
body: <p>I'm trying to implement <a href="http://demo.hongkiat.com/css-sticky-position/index2.html" rel="nofollow noreferrer">sticky navbar to top on scrolling past it</a> in my react app component. </p>
  
  <pre><code> componentDidMount(){                               
          var self = this;
  
          let $ribbonEl = ReactDOM.findDOMNode(self.refs.ribbon);
  
          setTimeout(function(){
  
              let ribbonElOffsetTop = $ribbonEl.offsetTop;
              let $body = document.body;
  
              stickyScrollHandler =  function (event) {
                  console.log($body.scrollTop, ribbonElOffsetTop);
                  if($body.scrollTop &gt; ribbonElOffsetTop){
                      $ribbonEl.style.position = 'fixed';
                      $ribbonEl.style.top = 0;                                           
                  }else{
                      $ribbonEl.style.position = 'absolute';                
                      $ribbonEl.style.top = 'initial';
                  }
              }
              document.addEventListener('scroll', stickyScrollHandler);
          }, 1000)
       }
  </code></pre>
  
  <p>The problem is I need to wrap and attach my scroll handler inside timeout and hope that it gets the correct offsetTop within that 1 second. Because sometimes it takes time for the dynamic elements like images to load whose height is dynamic and can be decided on loading only. So I end up getting a lower offsetTop say 340px instead of the right offsetTop of 411px which produces bug in the UI.</p>
  
  <p>So, what is the right way to accomplish the same? How can I detect the change in its offsetTop and get the final offsetTop to attach the scrollHandler?</p>
  
  <p><a href="https://i.stack.imgur.com/pI6Fo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pI6Fo.png" alt="The portion in red bounds needs to stick"></a></p>