Dynamic navigation

nav.js

(function($){

  //Get elements
  var sections = $('section'),
      menuItems = $('.sidenav-item'),
      sectionsPosition = [],
      itemsValues = {};

  //Get sections positions from top
  for (var i = 0, length = sections.length; i < length; i++) {
    var positionTop = $(sections[i]).position().top;
    sectionsPosition.push(positionTop);
  }

  //Set list options values
  for (var i = 0; i < menuItems.length; i++) {
    itemsValues[sectionsPosition[i]] = menuItems[i];
  }



  function debounce(f, ms) {

  var state = null;

  var COOLDOWN = 1;

  return function() {
    if (state) return;

    f.apply(this, arguments);

    state = COOLDOWN;

    setTimeout(function() { state = null }, ms);
  }

}

//Main func

function f(x) {
  var scrolled = window.pageYOffset,
      arr = [];
  for (var i = 0; i < sectionsPosition.length; i++) {
    if (scrolled >= sectionsPosition[i]) {
      arr.push(sectionsPosition[i]);
    }
  }

  var elem = arr.slice(-1);

  for (var prop in itemsValues) {

    itemsValues[prop].classList.remove('sidenav-item-active');
    if (prop == elem[0]) {
      itemsValues[prop].classList.add('sidenav-item-active');
    }
  }
}

var f = debounce(f, 150);

//Event trigger
  $(window).on('scroll', function(){
    f();
  });

})(jQuery);