title: Conditional addEventListener when div ID is at top of window
body: <p>I am trying to use <code>addEventListener</code> when the user <code>scroll</code> into view <code>&lt;div id="container"&gt;</code>. I have done so by scroll height but my attempts to <code>addEventListener</code> when <code>&lt;div&gt;</code> is on the top of the window.</p>
  
  <pre><code>handleHeaderStuck = () =&gt; {
      if (this.innerContainer.scrollTop &lt;= 500 &amp;&amp; this.state.isStuck === true) {
          this.setState({isStuck: false});
      }
      else if (this.innerContainer.scrollTop &gt;= 500 &amp;&amp; this.state.isStuck !== true) {
          this.setState({isStuck: true});
      }
  }
  </code></pre>
  
  <p>This will <code>setState</code> when scrolled <code>500px</code>.</p>
  
  <p><strong>How can I replace the condition of <code>500px</code> to be set when the user is with <code>id="container"</code> as the top of the window? Also replace <code>isStuck</code> state to <code>isStuckBottom</code> when the user reaches the bottom of the div.</strong></p>
  
  <p>The full code is</p>
  
  <pre><code>constructor(props) {
      super(props)
      this.state = {
        isStuck: false,
      }
      this.handleHeaderStuck = this.handleHeaderStuck.bind(this)
    }
  
    innerContainer = null
  
    componentDidMount () {
      this.innerContainer.addEventListener("scroll", this.handleHeaderStuck);
    }
  
    componentWillUnmount () {
      this.innerContainer.removeEventListener("scroll", this.handleHeaderStuck);    
    }
  
    handleHeaderStuck = () =&gt; {
       if (this.innerContainer.scrollTop &lt;= 500 &amp;&amp; this.state.isStuck === true) {
          this.setState({isStuck: false});
       }
       else if (this.innerContainer.scrollTop &gt;= 500 &amp;&amp; this.state.isStuck !== true) {
          this.setState({isStuck: true});
       }
    }
  </code></pre>