title: Detect window onscroll in React Typescript
body: <p>I am creating an APP in React Typescript. I am trying to avoid using Jquery where possible.</p>
  
  <p>I need to detect when the window has scrolled to a point so I can update the header class. This is how it would be done in Jquery:</p>
  
  <pre><code>  $(window).scroll(function() {
      var scroll = $(window).scrollTop();
      if(scroll &gt;= 200) {
        $(".navbar-default").addClass("dark");
      } else {
        $(".navbar-default").removeClass("dark");
      }
    });
  </code></pre>
  
  <p>My entry point HTML looks like this (cut down)</p>
  
  <pre><code>&lt;body&gt;
  &lt;noscript&gt;
    You need to enable JavaScript to run this app.
  &lt;/noscript&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>the entry tsx file:</p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import Layout from './views/layout/layout';
  import registerServiceWorker from './registerServiceWorker';
  import './index.css';
  import { Provider } from 'react-redux';
  import { createStore } from 'redux';
  import { enthusiasm } from './reducers/index';
  import { StoreState } from './types/index';
  
  const store = createStore&lt;StoreState&gt;(enthusiasm, {
    enthusiasmLevel: 1,
    languageName: 'TypeScript',
  });
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;Layout /&gt;
    &lt;/Provider&gt;,
    document.getElementById('root') as HTMLElement
  );
  registerServiceWorker();
  </code></pre>
  
  <p>What would be the recommended way to replicate this type of event?</p>