function offset(elt) {
  var rect = elt.getBoundingClientRect(), bodyElt = document.body;
  return {
    top: rect.top + bodyElt .scrollTop,
    left: rect.left + bodyElt .scrollLeft
  }
}

window.addEventListener("load", function(){
  if(document.querySelector("#sidebar")){
    const sidebar = document.querySelector("#sidebar");
    const footer = document.querySelector("section");
    const top = offset(sidebar).top;
    const footTop = offset(footer).top;
    const maxY = footTop - sidebar.offsetHeight

    window.addEventListener("scroll", function(){
      let y = document.scrollingElement.scrollTop;
      if (y > top) {
        if (y < maxY) {
          sidebar.classList.add("fixed")
          sidebar.removeAttribute('style');
        } else {
          sidebar.classList.remove("fixed")
          sidebar.setAttribute('style', 'position: absolute; top: '+(maxY - top)+'px');
        }
      } else {
        sidebar.classList.remove("fixed")
      }
    })
  }
});