title: Navbar active tab change color when scrolled
body: <p>I would like my active tab to <em>change</em> colour when user scroll pass 1000px and <em>return</em> to original color when it's &lt;1000px.</p>
  
  <p>I've tried the CSS below which works and changes the background on active tab <em>permanently</em>.</p>
  
  <pre><code>.navbar-default .navbar-nav &gt; .active{
     background: #111;
  }
  
  .navbar-default .navbar-nav &gt; .active &gt; a, 
  .navbar-default .navbar-nav &gt; .active &gt; a:hover, 
  .navbar-default .navbar-nav &gt; .active &gt; a:focus {
      background: #111;
  }
  </code></pre>
  
  <p>Also tried combining the CSS above and a scroll function, but I don't think I'm targeting the active div right... <strong>How can I best target this active tab class in a scroll function?</strong> Or is there a better alternative to this method?</p>
  
  <p>JsFiddle : <a href="https://jsfiddle.net/Lczsjz3y/7/" rel="nofollow">https://jsfiddle.net/Lczsjz3y/7/</a></p>
  
  <p>Any help would be appreciated :)</p>