title: How to make a component show/hide on scroll in react.js
body: <p>I'm trying to make a footer banner show only when user scrolls down past the header, and hide it when user scrolls up to top. My idea of how to implement this is to add an event listener for scroll event in the top component of the page. Here's my current code. But it doesn't work:</p>
  
  <pre><code>componentDidMount() {
    this.nv.addEventListener('scroll', this.handleScroll);
  }
  
  handleScroll(e) {
    if(window.pageYOffset &gt; 50 &amp;&amp; window.pageYOffset &lt; 900) {
      console.log('scrolled');
      this.setState({
        showBanner: true,
      });
    } else {
      this.setState({
        showBanner: false,
      });
    }
  }
  </code></pre>
  
  <p>The render method of the top component:</p>
  
  <pre><code>render() {
    return (
      &lt;div ref={elem =&gt; this.nv = elem}&gt;
        &lt;Header/&gt;
        &lt;Body
          userInfo={this.props.userInfo}
          history={this.props.history}
        /&gt;
        {
          this.state.showBanner &amp;&amp; &lt;Banner/&gt;
          || null
        }
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>I don't see any logs and the <code>setState</code> is apparently not called when scrolling. </p>
  
  <p>Any suggestion on how I can accomplish the intended goal? </p>
  
  <p><strong>* UPDATE *</strong>
  Changed <code>componentDidMount</code> to add event listener on window, now it's working.</p>
  
  <pre><code>componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }
  </code></pre>