title: Active class not toggled when scrolling
body: <p><strong>I will refer <a href="https://startbootstrap.com/template-overviews/scrolling-nav/" rel="nofollow noreferrer">https://startbootstrap.com/template-overviews/scrolling-nav/</a> as <em>the website</em></strong></p>
  
  <hr>
  
  <p>I'm using <strong>page-scroll</strong> almost exactly they same as they do at the website but I cannot get the <code>&lt;li&gt;</code> tags in my navigation sidebar to be automatically set to active when scrolling down the page. The opposite works just fine - it scrolls smoothly to correct position when clicking on a link.</p>
  
  <p>I've done as said: </p>
  
  <blockquote>
    <p>Make sure to include the scrolling-nav.js, jquery.easing.min.js, and
    scrolling-nav.css files. To make a link smooth scroll to another
    section on the page, give the link the .page-scroll class and set the
    link target to a corresponding ID on the page.</p>
  </blockquote>
  
  <p>Sidebar HTML in body</p>
  
  <pre><code>&lt;!-- side navigation --&gt;
  &lt;div id="sidebar-wrapper"&gt;
      &lt;ul class="sidebar-nav"&gt;
          &lt;li class="sidebar-brand"&gt;
              &lt;img src="{{ URL::asset('images/pic_for_now.jpg') }}" alt=""&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="menu-item page-scroll" href="#home"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="menu-item page-scroll" href="#about"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="menu-item page-scroll" href="#education"&gt;Education&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="menu-item page-scroll" href="#experience"&gt;Experience&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="menu-item page-scroll" href="#portfolio"&gt;Portfolio&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="menu-item page-scroll" href="#contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="menu-footer"&gt;
              &lt;a href="{{ URL::to('cv') }}"&gt;&lt;h6&gt;&lt;i class="lnr lnr-download"&gt;&lt;/i&gt;Download CV&lt;/h6&gt;&lt;/a&gt;
              &lt;span&gt;
                  &lt;a href="#"&gt;ENGLISH&lt;/a&gt;
                  &lt;a href="#"&gt;SVENSKA&lt;/a&gt;
              &lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!-- / side navigation --&gt;
  </code></pre>
  
  <p>And the scrolling-nav.js</p>
  
  <pre><code>$(function() {
      //jQuery for page scrolling feature - requires jQuery Easing plugin
      $('a.page-scroll').bind('click', function(event) {
          var $anchor = $(this);
          $('html, body').stop().animate({
              scrollTop: $($anchor.attr('href')).offset().top
          }, 1500, 'easeInOutExpo');
          event.preventDefault();
      });
  
      // Adding active class to corresponding link on click
      $(".sidebar-nav a").on("click", function(){
         $(".sidebar-nav").find(".active").removeClass("active");
         $(this).parent().addClass("active");
      });
  });
  </code></pre>
  
  <p>I've added a click function separately to add the <code>active</code> class but at the website, the <code>&lt;li&gt;</code> tags does get active <em>after</em> it has scrolled to that particular position. But in my case, they'll never get active. </p>
  
  <p>It seams as the website must have some more js code to handle this but it doesn't. Anyone having a clue? </p>
  
  <p><em>I'm using Blade templating (Laravel/PHP) if you're wondering about the {{ }} syntax</em> </p>