Navbar color change after scroll

Simplest way to change navbar color after window scroll:

Javascript::

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

CSS Code::

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

.navbar-fixed-top.scrolled .nav-link {
  color:#555;
}

HTMl::

<nav id="navigation" class="navbar navbar-dark bg-primary navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#projects" class="nav-link">Projects</a></li>
<li class="nav-item"><a href="#blog" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="#contact-us" class="nav-link">Contact us</a></li>
</ul>
</nav>