Как остановить фиксированное положение липкой боковой панели при достижении нижнего колонтитула

Question

У меня довольно длинная боковая панель, которая фиксируется в определенной позиции прокрутки, но как только она попадает в конец страницы, она перекрывает нижний колонтитул. Я бы хотел «открепить» боковую панель на этом этапе, но не заставлять ее подпрыгивать вверх, потому что, если я просто удаляю фиксированный класс, он подпрыгивает вверх, но если я прокручиваю снова на всех, он переходит обратно вниз. Я все еще плохо знаком с JavaScript.

const staticSidebar = document.querySelector('.static-sidebar');
const navTop = staticSidebar.offsetTop;
const footerTop = document.querySelector('.footer').offsetTop;
console.log(`Footer top is ${footerTop}`);

function stickyNavigation() {
  if (window.scrollY >= navTop){
    staticSidebar.classList.add('fixed');   
  } else {
    staticSidebar.classList.remove('fixed');
  }
}

window.addEventListener('scroll', stickyNavigation);

кодовый код здесь

Answer 1

У меня получилось так, как я хочу, единственное, есть небольшая ошибка в боковой панели, которая иногда застревает на верхнем колонтитуле, но в целом я доволен этим. Я устанавливаю верхнюю позицию на отрицательное число в зависимости от положения боковой панели относительно нижнего колонтитула.

function sticky_relocate() {
    const sticky = document.querySelector('#sticky');
    const window_top = window.scrollY;
    const footer_top = document.querySelector('#footer').offsetTop;
    const div_top = document.querySelector('#sticky-anchor').offsetTop;  
    const div_height = document.querySelector('#sticky').offsetHeight;
    var padding = 0;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding){
        let negTop = (window_top + div_height - footer_top + padding) * -1;
        sticky.style.top = negTop + 'px';
    }else if (window_top > div_top) {
        sticky.classList.add('stick');
        sticky.style.top = 0;
    } else {
        sticky.classList.remove('stick');  
    }
}
window.addEventListener('scroll', sticky_relocate);

Обновленная ручка