title: Change active tab depending on scroll position
body: <p>I'm currently messing around with trying to create a one page website. At the moment I've got the navigation menu to scroll to the selected part of the website when clicked and active tab will change on click too. But what I'm trying to figure out is how to make the css change to the active tab when the next page has been scrolled on to (and not clicked in the menu).</p>
  
  <pre><code>$(document).ready(function(){
      $("nav ul li").click(function(){
          var sectionClass = $(this).attr('class');   
              if ($(this).hasClass('active')){
              }
              else {
                  $("nav ul li.active").removeClass('active');    
                  $(this).addClass('active');                                 
                  sectionId = $(this).attr('id');
                  var parts = sectionId.split("_");
                  $('html, body').animate({                                       
                      scrollTop: $("#" + parts[1]).offset().top
                  }, 'slow');
              }
          });
      });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;nav class="nav-bar"&gt;
          &lt;ul&gt;
              &lt;li class="active" id="menu_index"&gt;Welcome&lt;/li&gt;
              &lt;li id="menu_page1"&gt;Menu1&lt;/li&gt;
              &lt;li id="menu_page2"&gt;Menu2&lt;/li&gt;
              &lt;li id="menu_page3"&gt;Menu3&lt;/li&gt;
              &lt;li id="menu_page4"&gt;Menu4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id="index"&gt;&lt;/div&gt;
      &lt;div id="page1"&gt;&lt;/div&gt;
      &lt;div id="page2"&gt;&lt;/div&gt;
      &lt;div id="page3"&gt;&lt;/div&gt;
      &lt;div id="page4"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/nsefqo3w/" rel="nofollow">https://jsfiddle.net/nsefqo3w/</a></p>
  
  <p>Added jsfiddle to show how it is just now, I'm new so you'll probably spot a few problems!</p>