Navigation dots that highlight as you scroll through page - not working

Question

I'm using dots on my page to allow the user to navigate to certain sections. When they are clicked they change colour and navigate to that section. I want it so that they change colour as you scroll through the page.

The code snippet below works fine but on my page the dots only change colour if you click them, not when you scroll through the page. I guess this means there's an error with the way I've added it to the page but i'm not sure what this is.

$(document).on("click","a[href^='#']",function(e){
  var href=$(this).attr("href"),target=$(href).parents(".mCustomScrollbar"); 
  if(target.length){
    e.preventDefault();
    target.mCustomScrollbar("scrollTo",href);
  }
});

$(document).ready(function () {

    $(document).on('scroll', function() {
      var currentPosition = $(this).scrollTop();
      $('.section').each(function() {
        var sectionPosition = $(this).offset().top;
        if(sectionPosition < currentPosition) {
          $('a').removeClass('active');
          $('a[href="#'+$(this).attr('id')+'"]').addClass('active');
        }
      });
    });
    $('a').on('click', function() {
      $('a').removeClass('active');
      $(this).addClass('active');
    });
});

.navbar-nav{
    width: 100%;
    position: fixed;
    top: 0;
}
.navbar-nav li {
  float: left; 
  margin-left: 10px; 
  list-style: none;
  border-radius: 50%;
  height: 30px;
}
.section {
     height: 200px;
    text-align: center;
    padding: 200px;
}
.nav a.active {
    background-color: red;
}
.navbar-nav li a{
 background-color: transparent;
  border: 1px solid #3D4E58;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 8px;
  line-height: 0;
  outline: medium none;
  padding: 5px;
  position: relative;
  text-indent: -9999px;
  width: 8px;
  margin-bottom: 25px;
}
#home {clear: both;}

.newClass{
    background : red;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
   <li><a href="#section1" class="active">name</a></li>
   <li><a href="#section2">name</a></li>
   <li><a href="#section3">name</a></li>
   <li><a href="#section4">name</a></li>
   <li><a href="#section5">name</a></li>
   <li><a href="#section6">name</a></li>
   <li><a href="#section7">name</a></li>
   <li><a href="#section8">name</a></li>
   <li><a href="#section9">name</a></li>
   <li><a href="#section10">name</a></li>
   <li><a href="#section11">name</a></li>
</ul>

<div id="section1" class="section">
<p>Our three year strategic plan ends in 2017 so we are busy writing our new one. Kent Union's plan outlines the priorities for our organisation and what we will be working on. It's really important that we get your input into our plan for 2017 - 2020. We are your students' union and improving your student experience here at the University of Kent is what we are here to do.</p>
</div>

<div id="section2" class="section">
<p>There are lots of different ways you can get involved in developing our new plan.</p>
<p>Take our survey to tell us how you feel about life at Kent and what you want us to work on</p>
<p>Send us your feedback, on anything you think we need to know</p>
<p>Sign up to take part in a focus group or interview</p>
</div>

<div id="section3" class="section">
<p>How we're developing our new plan. We'll keep this section updated, so you can see our progress and what we've found out.</p>
</div>

<div id="section4" class="section">
<p>Stage 1: Desk based research to understand all the issues that might affect you. You can read our full report here, or for those of you without an hour to spare we've done a one page version.
</p>
</div>

<div id="section5" class="section">
<p>Stage 2: Interviews with senior university staff</p>
</div>

<div id="section6" class="section">
<p>Stage 3: Large scale survey with all our members</p>
</div>

<div id="section7" class="section">
<p>Stage 4: Focus groups and interviews with some of you</p>
</div>

<div id="section8" class="section">
<p>Stage 5: Focus groups with secondary school and FE students, to understand their perspectives of studying at University 
</p>
</div>

<div id="section9" class="section">
<p>Stage 6: Presenting our draft plan at AGM in November for your feedback</p>
</div>

<div id="section10" class="section">
<p>Stage 7: Presenting our plan to the University of Kent's management team in December
</p>
</div>

<div id="section11" class="section">
<p>Stage 8: Signing off our plan at our Board of Trustees in March</p>
<p>If you have any questions about how we use our plan or to find out more about us, please contact your full time officer team.</p>
</div>