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);

codepen here

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);

Updated pen

到达底部页脚时如何停止粘性侧栏的固定位置

1 个答案: