title: Get div's offsetTop positions in React
body: <p>I am trying to implement a List view in React. 
  What I am trying to achieve is that to store the list headers informations and register the components and register the scroll event.
  every time when user scroll the window, I'd like to take out the stored div and re-calculate the <code>offsetTop</code> data.</p>
  
  <p>The problem now is that, I found the console just print out the initial value (the value is fixed and never changed) <code>offsetTop</code> data never change in <code>onscroll</code> function.</p>
  
  <p>Anyone suggest how to get latest <code>offsetTop</code> from the <code>_instances</code> object?</p>
  
  <pre><code>import React, { Component } from 'react';
  import ListHeader from './lib/ListHeader';
  import ListItems from './lib/ListItems';
  
  const styles = {
    'height': '400px',
    'overflowY': 'auto',
    'outline': '1px dashed red',
    'width': '40%'
  };
  
  class HeaderPosInfo {
    constructor(headerObj, originalPosition, originalHeight) {
      this.headerObj = headerObj;
      this.originalPosition = originalPosition;
      this.originalHeight = originalHeight; 
    }
  }
  
  export default class ReactListView extends Component {
    static defaultProps = {
      events: ['scroll', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll', 'resize', 'touchmove', 'touchend'],
      _instances:[],
      _positionMap: new Set(),
      _topPos:'',
      _topWrapper:''
    }
  
    static propTypes = {
      data: React.PropTypes.array.isRequired,
      headerAttName: React.PropTypes.string.isRequired,
      itemsAttName: React.PropTypes.string.isRequired,
      events: React.PropTypes.array,
      _instances: React.PropTypes.array,
      _positionMap: React.PropTypes.object,
      _topPos: React.PropTypes.string,
      _topWrapper: React.PropTypes.object
    };
  
    state = {
      events: this.props.events,
      _instances: this.props._instances,
      _positionMap: this.props._positionMap,
      _topPos: this.props._topPos
    }
  
    componentDidMount() {
      this.initStickyHeaders();
    }
  
    componentWillUnmount() {
  
    }
  
    componentDidUpdate() {
  
    }
  
    refsToArray(ctx, prefix){
      let results = [];
      for (let i=0;;i++){
        let ref = ctx.refs[prefix + '-' + String(i)];
        if (ref) results.push(ref);
        else return results;
      }
    }
  
    initHeaderPositions() {
      // Retrieve all instance of headers and store position info
      this.props._instances.forEach((k)=&gt;{
        this.props._positionMap.add(new HeaderPosInfo(
            k, 
            k.refs.header.getDOMNode().offsetTop,
            k.refs.header.getDOMNode().offsetHeight
          ));
      });
      let it = this.props._positionMap.values();
      let first = it.next();
      this.props._topPos = first.value.originalPosition;
      this.props._topWrapper = first.value.headerObj;
    }
  
    initStickyHeaders () {
      this.props._instances = this.refsToArray(this, 'ListHeader');
      this.initHeaderPositions();
  
      // Register events listeners with the listview div
      this.props.events.forEach(type =&gt; {
        if (window.addEventListener) {
          React.findDOMNode(this.refs.listview).addEventListener(type, this.onScroll.bind(this), false);
        } else {
          React.findDOMNode(this.refs.listview).attachEvent('on' + type, this.onScroll.bind(this), false);
        }
      });
    }
  
    onScroll() {
  
      // update current header positions and apply fixed positions to the top one
      console.log(1);
      let offsetTop  = React.findDOMNode(this.props._instances[0].refs.header).offsetTop;
  
    }
  
    render() {
      const { data, headerAttName, itemsAttName } = this.props;
      let _refi = 0;
      let makeRef = () =&gt; {
        return 'ListHeader-' + (_refi++);
      };
  
      return (
        &lt;div ref="listview" style={styles}&gt;
        {
          Object.keys(data).map(k =&gt; {
          const header = data[k][headerAttName];
          const items  = data[k][itemsAttName];
            return (
              &lt;ul key={k}&gt;     
                &lt;ListHeader ref={makeRef()} header={header} /&gt;
                &lt;ListItems  items={items} /&gt;
              &lt;/ul&gt;
            );
          })
        }
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The whole source code is on Github, you can clone and compile it from here:</p>
  
  <p><a href="https://github.com/cht8687/react-listview-sticky-header">Github</a></p>