title: How to highlighting active menu item on scroll and click?
body: <p>I want to add a class <code>active</code> to the current menu item on scroll and click. It’s a single (long) page with different sections. When click on an item, the active state should switch to the current one. </p>
  
  <p>I came up with the following code, but doesn’t now how I can integrate the above:</p>
  
  <pre><code>// Click event
      $('#primary-navwrapper li a[href^="#"]').click(function(event) {
  
          // Prevent from default action to intitiate
          event.preventDefault();
  
          // The id of the section we want to go to
          var anchorId = $(this).attr('href');
  
          // Our scroll target : the top position of the section that has the id referenced by our href
          var target = $(anchorId).offset().top - offset;
          console.log(target);
  
          $('html, body').stop().animate({ scrollTop: target }, 500, function () {
              window.location.hash = anchorId;
          });
  
          return false;
      });
  </code></pre>