title: How to change navbar background color in react when I scroll
body: <p>I would like to make my navbar start out as transparent but when a user scrolls the navbar will change color / background-color. I am using a bootstrap navbar and react.</p>
  
  <p>jsx code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import '../css/nav.scss';
  import { Link, NavLink } from 'react-router-dom';
  import 'react-bootstrap';
  
  class Navbar extends Component {
    state = {};
  
    render() {
      return (
        &lt;nav className="navbar sticky-top navbar-expand-lg "&gt;
          &lt;NavLink
            to="/"
            class="navbar-brand"
            activeClassName="navbar-brand--active"
          &gt;
            Web_Env
          &lt;/NavLink&gt;
          &lt;button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown"
            aria-expanded="false"
            aria-label="Toggle navigation"
          &gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
            &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item"&gt;
                &lt;a class="nav-link" href="#"&gt;
                  Create post
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="navbar-nav ml-auto"&gt;
              &lt;li class="nav-item"&gt;
                &lt;NavLink
                  to="/login"
                  className="nav-link"
                  activeClassName="nav-link--active"
                &gt;
                  Login
                &lt;/NavLink&gt;
              &lt;/li&gt;
              &lt;li className="nav-item"&gt;
                &lt;NavLink
                  to="/register"
                  className="nav-link"
                  activeClassName="nav-link--active"
                &gt;
                  Register
                &lt;/NavLink&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  }
  
  export default Navbar;
  
  
  </code></pre>
  
  <p>css code: </p>
  
  <pre><code>$color1: #aceca1;
  $bgcolor1: #629460;
  .navbar {
    background-color: $bgcolor1 !important;
    .navbar-brand {
      color: lighten($color1, 10%);
      font-weight: bold;
      font-size: 2em;
      .navbar-brand--active {
        color: white;
        font-weight: bold;
        font-size: 2em;
      }
    }
  
    .nav-link {
      color: $color1;
      font-size: 1.1em;
      transition: 200ms;
    }
    .nav-link--active {
      color: white !important;
      transform: scale(1.1);
      font-weight: 10px;
    }
    .nav-link:hover {
      color: white !important;
      transform: scale(1.1);
      text-decoration: none !important;
      font-weight: 10px;
    }
  }
  
  </code></pre>
  
  <p>I have looked at a previous post about this from 2 years ago but being a beginner I didn't really understand any of it. If possible an explanations  alongside the code would help me very much.</p>