Прокрутка навбара в MDBootstarp

Question

это мой файл jsx

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Carousel from "./Carousel.component.js"

import {
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarToggler,
  MDBCollapse,
  MDBMask,
  MDBRow,
  MDBCol,
  MDBIcon,
  MDBBtn,
  MDBView,
  MDBContainer,
  MDBCard,
  MDBCardBody,
  MDBInput,
  MDBFormInline,
  MDBAnimation
} from "mdbreact";
import "../test.css";

class ClassicFormPage extends React.Component {
  state = {
    collapseID: ""
  };

  toggleCollapse = collapseID => () =>
    this.setState(prevState => ({
      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
    }));

  render() {
    const overlay = (
      <div
        id="sidenav-overlay"
        style={{ backgroundColor: "tranparent" }}
        onScroll={this.toggleCollapse("navbarCollapse")}
      />
    );
    return (
      <div id="classicformpage">
          <div>
            <MDBNavbar dark expand="md" fixed="top">
                <MDBNavbarBrand>
                  <strong className="white-text">MUN</strong>
                </MDBNavbarBrand>
                <MDBNavbarToggler
                  onClick={this.toggleCollapse("navbarCollapse")}
                />
            <MDBCollapse
                id="navbarCollapse"
                isOpen={this.state.collapseID}
                navbar
            >

            <MDBNavbarNav right>
            <MDBNavItem >
              <MDBNavLink to="/">Home</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="/schedule">Schedule</MDBNavLink>
            </MDBNavItem>

            <MDBNavItem >
              <MDBNavLink to="/team">Team</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="/gallery">Gallery</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem >
              <MDBNavLink to="/sponsors">Sponsors</MDBNavLink>
            </MDBNavItem>
            <MDBNavItem >
              <MDBNavLink to="/contact">Contact Us</MDBNavLink>
            </MDBNavItem>
            </MDBNavbarNav>
        </MDBCollapse>
            </MDBNavbar>
            {this.state.collapseID && overlay}
          </div>
          <Carousel/>
      </div>
    );
  }
}

export default ClassicFormPage;

это мой css файл

#classicformpage .view {
   background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 60vh;
}

#classicformpage .gradient {
  background: -webkit-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.7),
    rgba(72, 15, 144, 0.4) 100%
  );
  background: -webkit-gradient(
    linear,
    45deg,
    from(rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%)
  );
  background: linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.7),
    rgba(72, 15, 144, 0.4) 100%
  );
}

#classicformpage .card {
  background-color: rgba(126, 123, 215, 0.2);
}

#classicformpage h6 {
  line-height: 1.7;
}

#classicformpage .navbar {
  transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}

#classicformpage .top-nav-collapse {
  background: #424f95 !important;
}

@media (max-width: 768px) {
  #classicformpage .navbar:not(.top-nav-collapse) {
    background: #424f95 !important;
  }
}

#classicformpage label {
  color: #fff !important;
}

Я сомневаюсь, что я не получаю синий цвет фона панели навигации при прокрутке. Пожалуйста, проверьте.

Я получаю изображение карусели на панели навигации при загрузке страницы, но хочу, чтобы оно стало синим при прокрутке страницы. Я получаю изображение карусели на панели навигации при загрузке страницы, но я хочу, чтобы оно стало синим, если страница прокручивается.