title: Highlighting the sidebar links with scroll
body: <p>I have a side bar for a settings page which is like an index. I want the appropriate links to highlight every time I scroll to a different section of the page. I realize this has been asked before, and I tried doing what was told in a <a href="https://stackoverflow.com/questions/24887258/highlight-navigation-link-as-i-scroll-down-the-page">previous question</a> . I also looked at a couple of blogs, though their code seems quite complicated. </p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;div id="sidebar"&gt;
  
                &lt;nav class="navlinks"&gt;
                      &lt;ul style="list-style:none" id="sidebar-id"&gt;
  
                               &lt;li&gt; &lt;a href="#Profile-settings"&gt; Profile &lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt; &lt;a href="#social-settings"&gt; Social Media &lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt; &lt;a href="#"&gt; Logout &lt;/a&gt;&lt;/li&gt;
  
                        /ul&gt;
                    &lt;/nav&gt;       
               &lt;/div&gt;
  
  &lt;section id="Profile-settings"&gt;
      &lt;!--some content--&gt;
      &lt;/section&gt;
  
           &lt;section id="social-settings"&gt;
      &lt;!--some content--&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.active {
      color:red;    
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function () {
  
      $(document).scroll(function () {
          var scroll_top = $(document).scrollTop();
          var div_one_top = $('#Profile-settings').position().top;
          var div_two_top = $('#social-settings').position().top;
  
          if(scroll_top &gt; div_one_top &amp;&amp; scroll_top &lt; div_two_top) {
              //You are now past div one
              $('a[href="#Profile-settings"]').addClass('active');
              $('a[href="#social-settings"]').removeClass('active');
          } else if (scroll_top &gt; div_two_top) {
              $('a[href="#social-settings"]').addClass('active');
              $('a[href="#Profile-settings"]').removeClass('active');
  
  
          }
      });
  
      });
  </code></pre>
  
  <p>When I run this though, only the <code>&lt;li&gt; &lt;a href="#Profile-settings"&gt;Profile&lt;/a&gt;&lt;/li&gt;</code> shows the active class, constantly, meaning it wont change when I scroll to the bottom or top. The second <code>li</code>(#social settings) wont have the <code>.highlight</code> class get added to it at all. 
  I'm very new to javascript and jquery, and am grateful for all the help. Thank you all in advance.</p>