title: Caught on a persistent issue with JS, nav bar active class not switching properly
body: <p>I've been using this <a href="https://bootsnipp.com/snippets/featured/dot-navigation-with-tooltips" rel="nofollow noreferrer">code snippet</a> to add in a vertical dot nav to a one page site, which smooth scrolls to a section when one of the links are clicked, and keeps a highlight on the active section. I did a lot of tweaking to the css to make it look how I wanted, and then replaced the sections.</p>
  
  <p>So this is <a href="https://jsfiddle.net/tibevr/zma4t3pz/2/" rel="nofollow noreferrer">my code</a> in a jsfiddle, and the main issue I am having is the active class not changing properly, and making the side nav bar mess up. I've posted the JS below.</p>
  
  <pre><code>$(document).ready(function(){
  $('.awesome-tooltip').tooltip({
      placement: 'left'
  });   
  
  $(window).bind('scroll',function(e){
    dotnavigation();
  });
  
  function dotnavigation(){
  
      var numSections = $('section').length;
  
      $('#side-nav li a').removeClass('active').parent('li').removeClass('active');     
      $('section').each(function(i,item){
        var ele = $(item), nextTop;
  
        console.log(ele.next().html());
  
        if (typeof ele.next().offset() != "undefined") {
          nextTop = ele.next().offset().top;
        }
        else {
          nextTop = $(document).height();
        }
  
        if (ele.offset() !== null) {
          thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
        }
        else {
          thisTop = 0;
        }
  
        var docTop = $(document).scrollTop();
  
        if(docTop &gt;= thisTop &amp;&amp; (docTop &lt; nextTop)){
          $('#side-nav li').eq(i).addClass('active');
        }
      });   
  }
  
  /* get clicks working */
  $('#side-nav li').click(function(){
  
      var id = $(this).find('a').attr("href"),
        posi,
        ele,
        padding = 0;
  
      ele = $(id);
      posi = ($(ele).offset()||0).top - padding;
  
      $('html, body').animate({scrollTop:posi}, 'slow');
  
      return false;
  });
  </code></pre>
  
  <p>It works fairly well on the jsfiddle, but I am putting this code into squarespace, and on there it ends up like <a href="https://gyazo.com/fa3912b1742f076391652967529402ea" rel="nofollow noreferrer">this</a> where all of the buttons highlight when you try to change active classes.</p>
  
  <p>I have tried to isolate the bug by going through the html, css, and the js, but I don't have enough knowledge of JS to be able to edit the script to fix it.
  I would really appreciate any help. Thanks in advance.</p>
  
  <p>EDIT: Link to <a href="https://sophie-arnold-gyz4.squarespace.com/oodkasokdoakas-1/" rel="nofollow noreferrer">broken squarespace</a></p>