title: Bootstrap 5 navbar background color is not changing on scroll
body: <p>I am building an angular app in which I am using Bootstrap 5. I created a transparent navbar and I would like to see the background color change from transparent to dark when the page is scrolled. It doesn't work. It still keeps my navbar transparent instead of dark color each time the page is scrolled.</p>
  <p>My navbar code:</p>
  <pre><code>&lt;nav class=&quot;navbar fixed-top navbar-expand-lg navbar-dark p-md-3&quot;&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;a href=&quot;#&quot; class=&quot;navbar-brand&quot;&gt;WorkonPro&lt;/a&gt;
      &lt;button
        type=&quot;button&quot;
        class=&quot;navbar-toggler&quot;
        data-bs-target=&quot;#navbarNav&quot;
        data-bs-toggle=&quot;collapse&quot;
        arial-controls=&quot;navbarNav&quot;
        aria-expanded=&quot;false&quot;
        aria-label=&quot;Toggle Navbar&quot;
      &gt;
        &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNav&quot;&gt;
        &lt;div class=&quot;mx-auto&quot;&gt;&lt;/div&gt;
        &lt;ul class=&quot;navbar-nav&quot;&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link active item-space&quot; href=&quot;#&quot; aria-current=&quot;page&quot;
              &gt;Home&lt;/a
            &gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link item-space&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link item-space&quot; href=&quot;#&quot;&gt; Healthcare &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a class=&quot;nav-link item-space&quot; href=&quot;#&quot;&gt;Tech&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a
              href=&quot;#&quot;
              class=&quot;nav-link btn btn-sm item-space grey-button&quot;
              style=&quot;color: #fff&quot;
              role=&quot;button&quot;
              &gt;Login
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;nav-item&quot;&gt;
            &lt;a
              href=&quot;#&quot;
              class=&quot;nav-link btn btn-sm item-space green-button&quot;
              style=&quot;color: #fff&quot;
              role=&quot;button&quot;
              &gt;&lt;strong&gt;Create account&lt;/strong&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>The JS script I wrote with the aim to achieve this. (Please note that I wrote the same body of my html page)</p>
  <pre><code>&lt;script src=&quot;../../../../node_modules/bootstrap/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    var nav = document.querySelector('nav');
    window.addEventListener('scroll', function() {
      if (window.pageYOffset &gt; 100) {
        nav.classList.add('bg-dark', 'shadow');
      } else {
        nav.classList.remove('bg-dark', 'shadow');
      }
    });
  &lt;/script&gt;
  </code></pre>
  <p>My style which has to do with the navbar is below:</p>
  <pre><code>.bg-dark {
    background-color: #101011 !important;
  }
  
  .navbar-dark .navbar-brand {
    padding: 20px 0 10px 10px;
    color: #fff;
  }
  .navbar-nav .nav-link {
    color: #101011;
  }
  .navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 1);
  }
  .navbar-dark .navbar-brand {
     margin: 0;
     width: 50%;
     float: left;
     display: inherit;
  }
  .navbar-brand {
    color: #101011;
    padding: 20px 0 10px 10px;
  }
  
  body .navbar {
    padding: 6px 0 !important;
  }
  
  body .navbar-brand {
    background: none;
  }
  </code></pre>
  <p>Please can someone tell me what I am doing wrong? What did I miss? And how I can fix it.</p>
  <p>Thanks in advance.</p>