title: Sticky Navbar changes CSS after being sticky
body: <p>I know these sticky-navbar questions are asked really often, but I couldn't find a solution to my problem yet.</p>
  
  <p>I want the navbar, which is at the very top of my page, to come back and be fixed after scrolling 700px. This is working until now. But the problem is, that I need to change the css of the navbar (color and background-color) after it gets fixed.</p>
  
  <p>Here is my code: Html (I'm working with bootstrap):</p>
  
  <pre><code>&lt;nav class="navbar navbar-sm"&gt;
  
      &lt;div class="collapse navbar-collapse container-fluid" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
               &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Fotos&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Projects&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Project1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Project2&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My JavaScript is:</p>
  
  <pre><code>$(window).bind('scroll', function() {
  var navHeight = 700; 
  
  ($(window).scrollTop() &gt; navHeight) ? 
      $('nav').addClass('navbar-fixed-top') :
      $('nav').removeClass('navbar-fixed-top');});
  </code></pre>
  
  <p>My CSS is: </p>
  
  <pre><code>.caret {
  color: white;}
  
  .navbar ul li a{
  color: white;}
  </code></pre>
  
  <p>My problem is I need the color to be changed to black and the background to grey after scrolling.</p>
  
  <p>Thanks for your help.</p>