Bootstrap 4-滚动后导航栏更改

Question

我真的很喜欢网页上的透明横幅。

Transparent Navbar

但是，我很想这样做，所以当我向下滚动一定高度（最好是在英雄横幅之后）时，它会变成这样的黑色背景导航栏。

Dark navbar

这是html代码。

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
  <a class="navbar-brand" href="index.php"><img src="assets/img/logo-toitures.png" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.php">Accueil</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="a_propos.php">A propos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="services.php">Services</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="nous_joindre.php">Nous joindre</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="assets/EN/index.php">English</a>
      </li>
    </ul>
  </div>
</div>

我的透明导航栏的CSS

.navbar-trans { 
   background: transparent;
}