title: Add class to navbar item when scrolling
body: <p><strong>Hello</strong> I working on create one page website so what I need that for example if the section2 is appear in viewport add class active to link with href = "section2".
  <br></p>
  
  <p><strong>Example</strong> for what I need <a href="http://preview.themeforest.net/item/orka-portfolio-one-page/full_screen_preview/19437245" rel="nofollow noreferrer">one page website</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $(".links a").click(function (e) {
          if (this.getAttribute("href").charAt(0) == "#") {
              e.preventDefault();
              $(this).addClass("active").siblings().removeClass("active");
              $("html, body").stop();
              $("html, body").animate({
                  scrollTop: $($(this).attr("href")).offset().top
              }, 1400)
          }
          else {
              $($(this)).attr("target", "_blank")
          }
      })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.links{
    width:600px;
    position:fixed;
    top:0;
    padding:20px;
  }
  .links a{
    display:inline-block;
    padding:10px 20px;
    border:1px solid #02e62a;
    color:#02e62a;
    text-decoration:none;
  }
  .links a:hover, .links a.active{
      color:#fe0101;
      border-color:#fe0101;
  }
  .section{
    width:400px;
    height:200px;
    margin:300px auto 600px;
    background-color:#0094ff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="links"&gt;
          &lt;a href="#home"&gt;Section 1&lt;/a&gt;
          &lt;a href="#about"&gt;Section 2&lt;/a&gt;
          &lt;a href="http://google.com" target="_blank"&gt;External Link&lt;/a&gt;
          &lt;a href="#services"&gt;Section 3&lt;/a&gt;
          &lt;a href="#contact"&gt;Section 4&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="home" class="section"&gt;&lt;/div&gt;
      &lt;div id="about" class="section"&gt;&lt;/div&gt;
      &lt;div id="services" class="section"&gt;&lt;/div&gt;
      &lt;div id="contact" class="section"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Note:</strong> please don't recommended me to use any plugin.</p>