title: How do you get the active element using Waypoint?
body: <p>I'm using Waypoint (7.3.2) in React (16) to try and create a list of scrollable items where each item fades to invisible as it reaches the top of the div.  My basic question is how do I get a reference to the element that enters/leaves the waypoint in the event or callback?</p>
  
  <p>I thought that by including <code>ref={}</code> in the element I wanted to get in the callback I would get a reference to the element and be able to change the opacity. The following is the code where Waypoint is plugged in:</p>
  
  <pre><code>class Division extends Component {
      constructor(props) {
          super(props);
      }
  
      _handleWayPointEnter = (event) =&gt; {
          console.log("Waypoint enter " + JSON.stringify(event, 4));
      }
      _handleWayPointLeave = (event) =&gt; {
          console.log("Waypoint leave " + JSON.stringify(event, 4));
      }
  
      render() {
          let inlineStyle= {opacity : this.state.opacity};
          return (
              &lt;Waypoint debug={false} onEnter={this._handleWayPointEnter} onLeave={this._handleWayPointLeave} &gt;
                  &lt;div style={inlineStyle} ref={this.props.innerRef} className="sch-division"&gt;
                      {this.props.name}&lt;br/&gt;
                      &lt;SomeOtherComponent /&gt;
                  &lt;/div&gt;
              &lt;/Waypoint&gt;
          );
      }
  
  }
  
  export default Division;
  </code></pre>
  
  <p>Any/all replies appreciated! </p>
  
  <p>-- griff</p>