ProgressIndicatorJS

Progress Indicator nell'Aside

Il Progress Indicator nell'Aside è gestito dall'evento onscroll che, in base a dove siamo sulla pagina aggiorna la width del div con la classe _progress-indicator.

export function updateProgress() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  $('._progress-indicator').each(function() {
    this.style.width = scrolled + "%";
    setActiveSection()
  })
}

I metodi invece che rendono attiva una sezione (aggiungendo la classe active all'elemento della lista) sono i seguenti:

function setActiveSection() {
  $('._anchor').each(function(i, obj) {
    if (obj.getBoundingClientRect().top <= 10 ) {
      clearAllActives()
      setActive($(obj).children().attr('id'))
    }
  });
}

function clearAllActives() {
  $('.nav-item').each(function(i, obj) {
    $(obj).children().removeClass('active')
  })
}

function setActive(id) {
  $('._top-menu .nav-item').each(function(i, obj) {
    if ($(obj).children().attr('href') === `#${id}` && !$(obj).children().hasClass('active')) {
      $(obj).children().addClass('active')
    }
  })
}

La classe _anchor è richiesta per essere presa come riferimento quando andiamo a controllare se quella sezione è nel viewport oppure no, gestendo la classe active sull'Aside.