title: Changing Navigation Bar Color in Angular 5
body: <p>I am using Angular 5 and Bootstrap 4 as my main front-end frameworks. I am using <code>fixed-top</code> bootstrap's nav bar. I am trying to change the background of that navbar when i scroll the window. That's why i tried using jquery but i am getting error i.e <code>$ is not defined</code>.
  Here is my jquery code</p>
  
  <pre><code>$(document).ready(function(){
      $(window).scroll(function() { 
        if ($(document).scrollTop() &gt; 50) { 
          $(".navbar-fixed-top").css("background-color", "#ffffff");
        } else {
          $(".navbar-fixed-top").css("background-color", "transparent"); 
        }
      });
    });
  </code></pre>
  
  <p>And this is my html code</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbarColor03"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;form class="form-inline my-2 my-lg-0"&gt;
        &lt;input class="form-control mr-sm-2" type="text" placeholder="Search"&gt;
        &lt;button class="btn btn-secondary my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>