title: Toggle Class based on scroll React JS
body: <p>I'm using bootstrap 4 nav bar and would like to change the background color after ig 400px down scroll down. I was looking at the react docs and found a onScroll but couldn't find that much info on it. So far I have... </p>
  
  <p>I don't know if I'm using the right event listener or how to set the height etc.</p>
  
  <p>And I'm not really setting inline styles... </p>
  
  <pre><code>  import React, { Component } from 'react';
  
     class App extends Component {
  
     constructor(props) {
      super(props);
  
        this.state = {  scrollBackground: 'nav-bg' };
        this.handleScroll = this.handleScroll.bind(this);
     }
  
  
     handleScroll(){
        this.setState ({
           scrollBackground: !this.state.scrollBackground
         })
      }
  
   render() {
   const scrollBg = this.scrollBackground ? 'nav-bg scrolling' : 'nav-bg';
  
   return (
     &lt;div&gt;
  
         &lt;Navbar inverse toggleable className={this.state.scrollBackground} 
                                    onScroll={this.handleScroll}&gt;
          ...
        &lt;/Navbar&gt;
  
      &lt;/div&gt;
     );
    }
  }
  
  export default App;
  </code></pre>