when doing scrolling-down the navbar dosen't change the

<!--Navbar-->

<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

<!-- Navbar brand -->

<mdb-navbar-brand>

<a class="navbar-brand"href="#">Navbar</a>

</mdb-navbar-brand>

<!-- Collapsible content -->

<links>

<!-- Links -->

<ul class="navbar-nav mr-auto">

<li class="nav-item active">

<a class="nav-link waves-light"mdbWavesEffect>Home

<span class="sr-only">(current)</span>

</a>

</li>

<li class="nav-item">

<a class="nav-link waves-light"mdbWavesEffect>Features</a>

</li>

<li class="nav-item">

<a class="nav-link waves-light"mdbWavesEffect>Pricing</a>

</li>

<!-- Dropdown -->

<li class="nav-item dropdown"dropdown>

<a dropdownToggle mdbWavesEffect type="button"class="nav-link dropdown-toggle waves-light"mdbWavesEffect>

Basic dropdown

<span class="caret"></span>

</a>

<div *dropdownMenuclass="dropdown-menu dropdown dropdown-primary"role="menu">

<a class="dropdown-item waves-light"mdbWavesEffect href="#">Action</a>

<a class="dropdown-item waves-light"mdbWavesEffect href="#">Another action</a>

<aclass="dropdown-item waves-light"mdbWavesEffect href="#">Something else here</a>

<div class="divider dropdown-divider"></div>

<a class="dropdown-item waves-light"mdbWavesEffect href="#">Separated link</a>

</div>

</li>

</ul>

<!-- Links -->

<!-- Search form -->

<form class="form-inline waves-light"mdbWavesEffect>

<div class="md-form mt-0">

<input class="form-control mr-sm-2"type="text"placeholder="Search">

</div>

</form>

</links>

<!-- Collapsible content -->

</mdb-navbar>

<!--/.Navbar-->

<div style="height: 2000px"></div>

.top-nav-collapse {

background-color: #424f95!important;

}

.navbar:not(.top-nav-collapse) {

background: transparent!important;

}