title: How to get scroll events once screen passes a specific point or jsx tag?
body: <p>This seems like a simple question but I have no idea where to find it.  If you scroll past a certain point how do you get a scroll event.  </p>
  
  <p>Note, I'm aware of how to do scroll events; I just want to know scroll events past certain "scroll points."  </p>
  
  <p>Basically, my main objective is to fade in words when scrolled past certain points. </p>
  
  <p>Here's some code showing my understanding:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  class Nav extends Component {
      state = {
          background: "",
          backgroundImage: "linear-gradient(to bottom right, white, white",
          navSize: "83px"
      }
      componentDidMount() {
          window.addEventListener('scroll', this.handleScroll);    
      } 
      componentWillUnmount() {
           window.removeEventListener('scroll', this.handleScroll);
      }
      handleScroll = () =&gt; {
  let currentPosition = 0;        
  currentPosition = (document.body.getBoundingClientRect()).top;
      console.log(currentPosition);
  if(currentPosition === 116) {
              this.setState({navSize: "130px"})
          }else {         
              this.setState({navSize: "100px"})
          };
      }
      render() {
  const { backgroundImage, navSize } = this.state;                
          return(
          &lt;div style={{ backgroundImage }} className="nav-root"&gt;
                      &lt;div style={{ height: navSize }} className="nav-inner-wrapper"&gt;
                          &lt;div className="nav-normal"&gt;
                              &lt;h3 className="font-size-increase0" &gt;RandomText + The Triangular = RandomText&lt;/h3&gt;                                                      
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
      }
  }
  
  Nav.propTypes = {
      user: PropTypes.shape({
          email: PropTypes.string
      }),
      logout: PropTypes.func
  };
  
  Nav.contextTypes= {
      router: PropTypes.object.isRequired
  }
  
  export default connect(null, {})(Nav);
  </code></pre>