title: How to change the menu active link while scrolling?
body: <p>I want to change the active class on my menu-items when scrolling down. When you scroll to the content that belongs to the menu-link, give that an active state (that will be styled in css). It's the same effect that Bootstrap is using with the <a href="http://getbootstrap.com/javascript/#scrollspy" rel="nofollow">scrollspy plugin</a>. However, I'm not using that same setup so I've tried several other scripts but I still can't get it to work. I'm using bootstrap 3 with the following code:</p>
  
  <p><a href="http://jsfiddle.net/sxsw45fd/3/" rel="nofollow">Check out the fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="intro"&gt;&lt;h1&gt;Please scroll down&lt;/h1&gt;&lt;/div&gt;
  
  &lt;div class="row"&gt;
  
      &lt;div class="col-md-2"&gt;
          &lt;div id="menu"&gt;
              &lt;ul class="navigation"&gt;
                  &lt;li&gt;&lt;a class="active" href="#one"&gt;One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#two"&gt;Two&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#three"&gt;Three&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#four"&gt;Four&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#five"&gt;Five&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#six"&gt;Six&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#seven"&gt;Seven&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- end of Menu --&gt;
  
      &lt;!-- Content --&gt;
      &lt;div id="content" class="col-md-10"&gt;
          &lt;h2 id="one"&gt;One&lt;/h2&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
          &lt;h2 id="two"&gt;Two&lt;/h2&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
          &lt;h2 id="three"&gt;Three&lt;/h2&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
          &lt;h2 id="four"&gt;Four&lt;/h2&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
          &lt;h2 id="five"&gt;Five&lt;/h2&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
          &lt;h2 id="six"&gt;Six&lt;/h2&gt;
          &lt;p class="text"&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="footer"&gt;
      &lt;h2 id="seven"&gt;Seven&lt;/h2&gt;
      &lt;p class="text"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body, html {
      height: 100%;
  }
  .intro {
      min-height: 100%;
      background: olive;
      color: #fff;
      text-align: center;
  }
  h1, h2 {
      padding: 40px 0 0;
      margin:0;
  }
  p.text {
      height: 700px;
      background: #ccc;
  }
  .active {
      background: pink;
  }
  </code></pre>