title: disable addEventListener for mobile/smaller screen devices
body: <p>I have a navigation component that has hidden navigation items until you scroll to a certain point in the viewport. <code>isTop</code> looks for the position on the page and once its reached the nav items fade in. On a mobile or tablet menu I want them to be visible all the time.</p>
  
  <p>Is there a method to detect if a user is on a smaller screen size and if they are you can disable an event listener?</p>
  
  <p>Snippet:</p>
  
  <pre><code>componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
    document.addEventListener('scroll', () =&gt; {
      const isTop = window.scrollY &lt; window.innerHeight - 50;
      if (isTop !== this.state.isTop) {
        this.setState({ isTop })
      }
    });
  }
  </code></pre>
  
  <pre><code>&lt;NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}&gt;
    &lt;NavLink className="active" href="/"&gt;Home&lt;/NavLink&gt;
  &lt;/NavItem&gt;
  &lt;NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}&gt;
    &lt;NavLink href="/option"&gt;Option&lt;/NavLink&gt;
  &lt;/NavItem&gt;
  &lt;NavItem className={this.state.isTop ? 'hide' : 'show fadeIn'}&gt;
    &lt;NavLink href="/option2"&gt;Option 2&lt;/NavLink&gt;
  &lt;/NavItem&gt;
  </code></pre>